Adding PWA to angular 8 - module build failed

问题

I have angular 8 app. Inside this app I have three projects.

I want to add @angular/pwa with this command

ng add @angular/pwa && ng build --prod

But when PWA is installed I get error

ERROR in ./node_modules/@angular/service-worker/fesm2015/service-worker.js Module build failed: Error: ENOENT: no such file or directory, open 'C:\Development\Repositories\app\node_modules@angular\service-worker\fesm2015\service-worker.js'

and in CHROME CONSOLE i get

Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:34469)
    at core.js:34487
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34483)
    at core.js:34487
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34483)
    at core.js:34487
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34483)

Before PWA everything working ok

EDIT: I also try to remove PWA and add it directly to project

ng add @angular/pwa --project app1

And now in my project src, I get new file manifest.webmanifest, in the root of project I get ngsw-config.json, and in project module I get ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })

But still, get the same error

EDIT:

Here is my folder structure. This is all how angular CLI is added. Do I need to add another file?

I don't have gsw-worker.js in any of my folders.

Also, when I open ngsw-config.json for "$schema": "../../node_modules/@angular/service-worker/config/schema.json" i get

Unable to load schema from c:\Development\Repositories\app\app-frontend\node_modules\@angular\service-worker\config\schema.json': ENOENT: no such file or directory, open 'c:\Development\Repositories\app\app-frontend\node_modules\@angular\service-worker\config\schema.json'

But if i look in node_modules shema.json is there

(root -angular.json, package.json... there is no any manifest.webmanifest and ngsw-config.json)
 |
 |
 |----projects
        |
        |----app1
               |------src
               |       |------app
               |       |        |-app.module.ts (here is in imports ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })) 
               |       |
               |       |-manifest.webmanifest
               |
               |
      ngsw-config.json
      tsconfig.json
      tsconfig.app.json
      tsconfig.spec.json

Mabey in ma app.module.ts (in my project) is the problem because I need to register 'ngsw-worker.js' but I can not find anywhere this in my app, mabey angular CLI not added this or I don't need this file?

回答1:

Please be aware that adding PWA is adding this features to one of the existing projects with the command below:

ng add @angular/pwa --project *project-name*

Check the official documentation from angular for more information: https://angular.io/guide/service-worker-getting-started

回答2:

There might be multiple errors in your application try to add pwa again properly with

ng add @angular/pwa --project *project-name*

and then build it with

ng build --prod

here is the link for your reference - https://angular.io/guide/service-worker-getting-started

Chrome console error

you are getting that error cause u are tying to access id from an object which is not defined for that you need to handle your object properly

for ex- let id = obj.id ? obj.id : '';

Try to fix that error first and then build it. If it doesn't work then remove your node_modules and then install it again and build it.

Hope this helps :)

回答3:

Few thing before you install pwa to angular project. First you need to update your @angular/cli to make sure you have lastest version

npm i -g @angular/cli

Then run

ng new projectname

Then add pwa to your project

ng add @angular/pwa --project *project-name*

And run

ng build --prod

回答4:

Steps to make it working...

• npm uninstall @angular/pwa

• npm cache clean

Random errors§ Some strange issues can be resolved by simply running npm cache clean and trying again. If you are having trouble with npm install, use the -verbose option to see more details.

• after all of this ng update

This will fix this error. This error happens because some of dependency in package.json is not up-to-date and they make mess with pwa.

来源：https://stackoverflow.com/questions/58933350/adding-pwa-to-angular-8-module-build-failed