Adding @angular/pwa not working on angular CLI

Question

I'm trying to run the command ng add @angular/pwa -- my project name so that I can implement service workers in my angular project but the error that I'm returned is "The add command requires to be run in an Angular project, but a project definition could not be found." If anyone can shed some light on what I can do to get past this error it would be much appreciated. I was upgrading from Angular CLI version 1.49. I have a feeling it has something to do with the angularcli.json file since the new version uses angular.json file.

This is also an exception when I try to use ng serve: Workspace needs to be loaded before it is used. Error: Workspace needs to be loaded before it is used

this is my version details:

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.0.1
Node: 10.12.0
OS: darwin x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.1
@angular-devkit/core         0.3.2
@angular-devkit/schematics   7.0.1
@angular/cli                 7.0.1
@ngtools/webpack             1.10.2
@schematics/angular          7.0.1
@schematics/update           0.10.1
rxjs                         5.5.12
typescript                   3.1.1
webpack                      3.11.0

Answer 1

You are right regarding the new version using the updated angular.json file. See the following links on updating the cli, they should help: Angular Cli Error: The serve command requires to be run in an Angular project, but a project definition could not be found and https://github.com/angular/angular-cli/issues/12215#issuecomment-433593036

In my case I did the following:

1. Uninstall the cli: npm uninstall -g angular-cli
2. Clear the npm cache: npm cache verify
3. Reinstall the angular cli: npm install -g @angular/cli@latest

After installing the cli and generating your project, run the following inside the project directory where name is the name of the app as defined inside the angular.json file:

ng add @angular/pwa --project name

It is important to note that name is the name of the project as listed inside the angular.json file. Inside that file you should find a directive like this: "defaultProject": "app", . So in my case it will be:

ng add @angular/pwa --project app

Answer 2

For existing projects, ng generate won't be the best solution. Check the angular.json in your project folder. "projects" key may have a project name. Underneath that you may find configurations for multiple commands. Try with that project name.