Angular-cli: Error adding `@angular/pwa` v0.7.0-rc.3

Created on 24 Jul 2018 · 48Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an `x`)

- [x] add

Versions

> node --version
v8.11.3

> npm --version
5.6.0

> ng --version
Angular CLI: 6.1.0-rc.3
Node: 8.11.3
OS: win32 x64
Angular: 6.0.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.0-rc.3
@angular-devkit/build-angular     0.7.0-rc.3
@angular-devkit/build-optimizer   0.7.0-rc.3
@angular-devkit/build-webpack     0.7.0-rc.3
@angular-devkit/core              0.7.0-rc.3
@angular-devkit/schematics        0.7.0-rc.3
@angular/cli                      6.1.0-rc.3
@angular/pwa                      0.7.0-rc.3
@ngtools/webpack                  6.1.0-rc.3
@schematics/angular               0.7.0-rc.3
@schematics/update                0.7.0-rc.3
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.9.2

OS: Windows 10

Repro steps

npm install --global @angular/cli@next
ng new test-app
cd test-app
ng add @angular/pwa@next --project=test-app

The log given by the failure

Installing packages for tooling via npm.
+ @angular/[email protected]
added 2 packages in 12.443s
Installed packages for tooling via npm.
Path "/ngsw-config.json" already exist.

Npm dependencies are updated (including package.json and package-lock.json), but the add command is not completed (no ngsw-config.json, no manifest.json, no changes in index.html, etc).

angulapwa devRel

Source

gkalpak

👍26

Most helpful comment

This seems to have been fixed (by #11655) and works fine with the beta versions:

@angular/cli@next (v6.2.0-beta.1)
@angular-devkit/build-angular@next (v0.8.0-beta.0)
@angular/pwa@next (v0.8.0-beta.1)

gkalpak on 6 Aug 2018

👍10 🎉4 ❤3

All 48 comments

Possible duplicate: https://github.com/angular/angular-cli/issues/11465

bave8672 on 25 Jul 2018

11465 is a little different. It is using cli@next with pwa@latest (which does indeed through that error, but I think it is expected due to "version mismatch" (in a sense)).

This issue is about cli@next + pwa@next, which should be compatible (and cause a different breakage than the one reported in #11465).

gkalpak on 25 Jul 2018

I faced the same problem with the latest CLI.

> ng -v
Angular CLI: 6.1.0
Node: 8.9.4
OS: darwin x64
Angular: 6.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.0
@angular-devkit/build-angular     0.7.0
@angular-devkit/build-optimizer   0.7.0
@angular-devkit/build-webpack     0.7.0
@angular-devkit/core              0.7.0
@angular-devkit/schematics        0.7.0
@angular/pwa                      0.7.0
@ngtools/webpack                  6.1.0
@schematics/angular               0.7.0
@schematics/update                0.7.0
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.9.2

$ ng add @angular/pwa --project=my-app
Installing packages for tooling via npm.
+ @angular/[email protected]
updated 1 package and audited 29133 packages in 10.227s
found 13 vulnerabilities (9 low, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
Installed packages for tooling via npm.
Path "/ngsw-config.json" already exist.

puku0x on 26 Jul 2018

👍14

Same here

proeben on 26 Jul 2018

Same problem

jsongo on 26 Jul 2018

Same issues

guysenpai on 26 Jul 2018

Someone kindly look into this asap. Thanks.

batbrain9392 on 26 Jul 2018

👍3

Same issue here as well.

jwuliger on 27 Jul 2018

Same issues.

and, another project with PWA:

ng g m consumer

Error:

newTree.optimize is not a function

luisfelipediaz on 27 Jul 2018

👍1

This is still an issue after the CLI 6.1.1 release.

stevehipwell on 27 Jul 2018

👍10

https://github.com/ducdung8491/angular-cli/blob/master/packages/angular_devkit/core/src/virtual-fs/host/memory.ts#L197

Khi tạo ngsw-config.json phương thức _rename(from, to) của SimpleMemoryHost có check to
trên _cache, vì nó đã tồn tại nên có ngoại lệ FileAlreadyExistException

ducdung8491 on 27 Jul 2018

😕4 🎉3 😄3 👎3 👍2 ❤2

Yup me too

adnathanail on 28 Jul 2018

_rename(from, to) does not check for from and to (after normalization) are identical.

  protected _rename(from: Path, to: Path): void {
    from = this._toAbsolute(from);
    to = this._toAbsolute(to);

    ** if (from == to) return ** is missing

    if (!this._cache.has(from)) {
      throw new FileDoesNotExistException(from);
    } else if (this._cache.has(to)) {
      throw new FileAlreadyExistException(to);
    }

voreiche on 28 Jul 2018

Possibly fixed by #11655.

gkalpak on 29 Jul 2018

👎7

its not fixed on version 0.7.1 on #11655 problem still exists with a fresh project and on adding existing projects

callawey on 29 Jul 2018

👍5 😕2

Not sure what you mean. #11655 has not been released yet (and thus not included in 0.7.1) 😕

gkalpak on 29 Jul 2018

ohh sorry then, i thought its fixed in v0.7.0-rc.3 and it has been released as 0.7.1

callawey on 29 Jul 2018

For anyone looking for a workaround, you may rollback to @angular/cli@~6.0.0 with @angular/pwa@~0.6.0.

VincentG85 on 30 Jul 2018

👍2

@VincentG85 : Are you sure reverting to 6.0.0 is solving it? Because when I'd tried, it gave another error.

batbrain9392 on 30 Jul 2018

@batbrain9392 Did you also revert @angular/pwa ?
It really doesn't solve the problem, it's only a workaround.
Hopefully a fix will be released soon.

VincentG85 on 30 Jul 2018

ng add @angular/[email protected] --project <name project as package.json>

It works for me, from #11663

virkinia on 31 Jul 2018

👍11 👎4

@virlliNia : I tried what u specified.

Project name in package.json : ng-universal
ng add @angular/[email protected] --project ng-universal
Error : Project 'ng-universal' could not be found in workspace.

Project name in angular.json : ngUniversal
ng add @angular/[email protected] --project ngUniversal
Error : Data path "" should NOT have additional properties(title).

batbrain9392 on 31 Jul 2018

@batbrain9392 you also need to use cli v6.0.8.

alexandremoore on 31 Jul 2018

👍7

@virlliNia after folloeing your suggestion , i also followed @alexandremoore, and then it fixed my issue.

alokeDcoder on 1 Aug 2018

@batbrain9392 were you able to fix it? Having same issue.

oluwatimio on 5 Aug 2018

@bamboozooled : Yeah, I could..

npm i -g @angular/[email protected]
ng new projectName
ng add @angular/[email protected]

batbrain9392 on 6 Aug 2018

👍3

This seems to have been fixed (by #11655) and works fine with the beta versions:

@angular/cli@next (v6.2.0-beta.1)
@angular-devkit/build-angular@next (v0.8.0-beta.0)
@angular/pwa@next (v0.8.0-beta.1)

gkalpak on 6 Aug 2018

👍10 🎉4 ❤3

@gkalpak : Although pwa works, since this version has new changes in angular.json, ng add @angular/material does not work.
Error : Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration.

batbrain9392 on 6 Aug 2018

@batbrain9392: That is totally unrelated to the current issue. Feel free to open a new one, if you think there is something broken with @angular/material.

gkalpak on 6 Aug 2018

@gkalpak The issue is that since around CLI v 6.1.0 various commands that used to work just don't. ng g c, ng g m, this one etc. We do downgrades and upgrades of CLI to get different parts working, delete and reinstall node_modules; for some that works, for some it doesn't. It is like real alchemy to get something working and overall it is frustrating. I seriously regret updating to CLI 6.1.1, that's when my problems started.

Now this issue is closed and suggestion is - as I understand it - to make basically Sophie's choice between PWA and Material.

Don't get me wrong, I really appreciate CLI. Usually it does very good job and is great help at routine tasks. Just recently way too many frequently used commands and functionality seems to be broken and there is no way in stable releases get all that sweet functionality working :(

Sorry about the rant probably just needed to vent the frustration.

PeS82 on 6 Aug 2018

👍1

Sorry to hear you are frustrated 😞

Just to be clear, there is no suggestion to choose between PWA and material. Both should work (and if they don't, they need to be fixed).

This issue was about @angular/pwa not working with latest cli. This problem has been fixed.

If there is also a problem with @angular/material (I'm not aware of that), please open a new issue. That way, the cli team will be aware of that and fix it too o/

gkalpak on 6 Aug 2018

@PeS82 Please also note that the error shown above and caused by ng add @angular/material, is actually generated by material itself and not the CLI. The relevant code is here: https://github.com/angular/material2/blob/master/src/lib/schematics/install/theming.ts#L26

clydin on 6 Aug 2018

I know there was no explicit suggestion to choose between PWA and Material. But based on @batbrain9392 comment I understand it that I can get adding PWA working by updating to versions you mentioned but since the angular.json structure is changed I cannot add material later. At least for the moment being.

Today I spent couple of hours diffing angular.json of project updated from Angular 5.x and new one trying to figure out why in the old one ng g c|m doesn't work while in the new one does. Couldn't find any difference in installed versions or config.

So I decided to move on and add PWA to the new project and work there and found out I can't. And that threw me over the top (if that means in English what I think it means) 😀

It is good to hear that this issue is fixed, however the overall experience lately is really frustrating.

Just ignore me, maybe it's the never-ending heat this summer that got me too, switching PC off and going to swim, maybe it will help 😁

PeS82 on 6 Aug 2018

@batbrain9392 Did not still work. I had to eventually add pwa functionality manually as adding @angular/pwa does not work in my existing app.

oluwatimio on 6 Aug 2018

A lot of circular references between issues because of 'duplicate'. It looks like finding similar problem between issues is solution, then issue closed. Please, do not enter wanna be - not tested solutions and information about may be "duplicate issue" and close. When you solve problem, then close all issues about problem. We now have to click between issues without finding solution.

b-mi on 9 Aug 2018

@b-mi what are you referring to? All issues should point to this one, that got fixed, and is now closed.

Dispersia on 9 Aug 2018

Dispersia, circular references to issues are here in common.

This issue is not fixed:

During standard installing (not beta versions):
ng add @angular/pwa

@angular/[email protected]
added 5 packages in 13.831s
Installed packages for tooling via npm.
Could not find index file for the project

ng add @angular/material

@angular/[email protected]
added 2 packages in 13.652s
Installed packages for tooling via npm.
Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration

Even, now looks like ng add @angular/material do not install @angular/cdk

ERROR in node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts(9,56): error TS2307: Cannot find module '@angular/cdk/overlay'.

b-mi on 9 Aug 2018

How are any of those circular, nor do they have to deal with the issue that this issue was meant to address? And are those currently existing issues? Where are the issue number for them?

Dispersia on 9 Aug 2018

This is just the turnaround after reading many slackoverflow and github solution.
I was successfully able to add angular material when my @angular/cli was at version 6.1.2 -->
then to add Pwa I downgrade the @angular/cli version to 6.0.8 and after I successfully added PWA again I upgraded the @angular/cli to next version v6.2.0-beta.1 then I upgraded my angular/core and angular/material.

My cli code-

npm install --save @angular/[email protected]
ng new project
ng add @angular/material
npm install --save @angular/[email protected]
ng add @angular/pwa
npm install --save @angular/cli@next
ng update @angular/core
ng update @angular/material

Hope this workaround works for you.

My Version at the moment
@angular/cli - 6.2.0-beta.1
@angular/material & @angular/cdk - 6.4.3
@angular/pwa - 0.6.8

abhishek1716 on 9 Aug 2018

👍1

Thank you abhishek1716! I've been struggling with this for a couple hours. Working solution for a mess of a problem.

sjohnson32 on 9 Aug 2018

👍1

Dispersia, this issue have reference to issues number 11465, 11666, 11662, 11663, 11655, 11839. Every of this issues have references too. We jump from issue to issue and back, and we see how are they "closed", but the issue was not really solved.

No, issue is not solved - I tried it yesterday (without tricks as downgrade and beta versions (because it can cause some another problem - I want to have libraries actual)) and the result was in my prev comment.

b-mi on 10 Aug 2018

👎2 👍1

I confirm: it works with

npm install @angular/cli@next -g
...
ng add @angular/pwa@next

Version info:

Angular CLI: 6.2.0-beta.2
Node: 8.11.3
OS: darwin x64
Angular: 6.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.0-beta.2
@angular-devkit/build-angular     0.8.0-beta.2
@angular-devkit/build-optimizer   0.8.0-beta.2
@angular-devkit/build-webpack     0.8.0-beta.2
@angular-devkit/core              0.8.0-beta.2
@angular-devkit/schematics        0.8.0-beta.2
@angular/cli                      6.2.0-beta.2
@angular/pwa                      0.8.0-beta.2
@ngtools/webpack                  6.2.0-beta.2
@schematics/angular               0.8.0-beta.2
@schematics/update                0.8.0-beta.2
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.16.5

webmaxru on 13 Aug 2018

👍7 ❤4 🎉2

I also just confirmed that it works with

npm install @angular/cli@next -g
...
ng add @angular/pwa@next

Although, now I get the following error when trying to add material using

ng add @angular/material

Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration

reyco1 on 13 Aug 2018

I can also report the issue that @reyco1 is experiencing. I suspect it is because of stable vs 'next' but here is my console output:

ng add @angular/material
Installing packages for tooling via yarn.
yarn add v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @angular/[email protected]" has unmet peer dependency "@angular/[email protected]".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @angular/[email protected]
info All dependencies
└─ @angular/[email protected]
Done in 6.79s.
Installed packages for tooling via yarn.
Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration

jwuliger on 13 Aug 2018

@reyco1 I got no erros when using Snapshot Build
npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds

paulimfavarato on 13 Aug 2018

Still not working. Even downgrading CLI or everything else. Keeps showing "Path 'ngsw-config.json' already exists" and it doesn't...

danieldiazastudillo on 13 Aug 2018

Same here on #11853

Angular CLI: 6.2.0-beta.2
Node: 10.8.0
OS: win32 x64
Angular: 6.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router