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

@angular/pwa was announced with the [release of Angular 6](https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4). I suspect you'll have to update Angular to 6+ first. — abraham, Oct 23 '18 at 02:29

score 10 · Accepted Answer · answered Jan 02 '19 at 22:10

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:

Uninstall the cli: npm uninstall -g angular-cli
Clear the npm cache: npm cache verify
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

score 7 · Answer 2 · answered Nov 01 '22 at 08:19

I couldn't install the package when I ran the below command

ng add @angular/pwa

When I was trying to fix this issue, The last version of @angular/pwa was v14.2.7 and my angular version was v11 so I installed a lower version of @angular/pwa and it worked for me. I ran this command

 ng add @angular/pwa@12.2.2

score 4 · Answer 3 · answered Feb 19 '23 at 00:14

4

I try updating the @angular-devkit/schematics-cli package to the latest version:

npm install @angular-devkit/schematics-cli@latest

but that failed. In the end I this worked for me:

I updated the entire @angular/cli package to the latest version:

npm install @angular/cli@latest

I did this on a new ng new project. It used the latest /pwa version

answered Feb 19 '23 at 00:14

Royer Adames

868
9
13

I had to update the CLI too in order to get the command to work – times29 Mar 24 '23 at 19:58
This work for me, Thanks. – Hossein Bajan Jul 11 '23 at 05:50

score 0 · Answer 4 · answered Sep 12 '22 at 12:40

0

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.

answered Sep 12 '22 at 12:40

Ishwara Bhat

186
1
9

score 0 · Answer 5 · answered Nov 18 '22 at 03:33

In my case I was changing the name only in the package.json file yet running ng add @angular/pwa --project name checks for the name in the angular.json file. So I had to update the name in the angular.json file as well and everything worked seemlessy then.

score 0 · Answer 6 · answered Dec 08 '22 at 16:19

0

Hamid answer worked for me. I am running Angular cli v8.2.2. For installing Angular 14 pwa did not work for me and kept on giving the error "this.tree.readText is not a function". Using the following command and installing pwa@12.2.2 worked for me:

ng add @angular/pwa@ --project projectNameInAngularJson

answered Dec 08 '22 at 16:19

hemang sharma

11
2

I think this answer is more a comment, may you have to less reputation – KargWare Dec 13 '22 at 09:45
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33371820) – ahuemmer Dec 14 '22 at 09:05

Adding @angular/pwa not working on angular CLI

6 Answers6