Uncaught TypeError: Cannot read property 'id' of undefined at registerNgModuleType - angular PWA

Question

after adding @angular/pwa to my app

ng add @angular/pwa --project appName

I get error

core.js:34469 Uncaught TypeError: Cannot read property 'id' of undefined at registerNgModuleType

If I in my appName.module.ts remove from imports

ServiceWorkerModule.register("ngsw-worker.js", {
  enabled: environment.production
})

app working again.

Angular.json is added

"serviceWorker": true,
"ngswConfigPath": "projects/tol5-admin-app/ngsw-config.json"

Here is my package.json

 "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/cdk": "~8.2.2",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.2.5",
    "@angular/material": "^8.2.2",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "@angular/service-worker": "~8.2.5",
    "@ngrx/effects": "^8.3.0",
    "@ngrx/schematics": "^8.4.0",
    "@ngrx/store": "^8.3.0",
    "@ngrx/store-devtools": "^8.3.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.4",
    "@angular/cli": "~8.3.4",
    "@angular/compiler-cli": "~8.2.5",
    "@angular/language-service": "~8.2.5",
    "@compodoc/compodoc": "^1.1.11",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "protractor": "~5.4.0",
    "rxjs-tslint-rules": "^4.26.1",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "tslint-angular": "^3.0.2",
    "typescript": "~3.5.3",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

Answer 1

In my case this error occurred seemingly at random. One moment it was working, and the next moment it wasn't. Known working commits were also broken.

I had to delete node_modules and reinstall them which fixed the problem.

Answer 2

This often happens when you've mixed up imports and declarations in the pertinent module (or some other such mix-up).
You might for example have put a component in the imports array, where only modules should be 'declared'.
The component should be in the declarations array.

Answer 3

In my case, I was running Angular 8 and my project suddenly stoped working (I assumed after a VS code update v 1.56.2)

I resolved this issue by deactivating a VS Code extension called Angular Language Service and deleting the node_modules folder.

Then i run npm install and my project is working since.

My package json dependencies

{
...
"dependencies": {
    "@angular/animations": "8.2.14",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/forms": "8.2.14",
    "@angular/http": "7.2.15",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/router": "8.2.14",
    "@microsoft/applicationinsights-web": "~2.5.5",
    "@ng-bootstrap/ng-bootstrap": "5.0.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular-archwizard": "^4.0.0",
    "animate.css": "^3.7.2",
    "bootstrap": "4.4.1",
    "chart.js": "2.8.0",
    "core-js": "3.5.0",
    "crypto-js": "^4.0.0",
    "file-saver": "2.0.2",
    "flag-icon-css": "^3.4.5",
    "moment": "2.24.0",
    "ng2-charts": "2.3.0",
    "ng2-validation": "^4.2.0",
    "ngx-mask": "^8.1.6",
    "ngx-progressbar": "2.1.1",
    "oidc-client": "1.10.1",
    "popper": "1.0.1",
    "rxjs": "6.5.3",
    "rxjs-compat": "6.5.3",
    "tslib": "1.10.0",
    "zone.js": "0.10.2"
  },
}

Answer 4

For me, this issue was related to the VSCode Plugin "Angular Language Service". I upgraded the plugin to the latest, and started getting this error. I am writing a new answer, because I still wanted to use the ALS so here are the steps to resolve it for people who are using ALS (latest) and an older version of angular in my case 8.

Basically what is happening is the new version of ALS uses the IVY engine which creates a bunch of files in node_modules that are not compatible with older versions of angular, so the below steps will fix that.

1. Upgrade to latest ALS (13.1.0)
2. Delete node-modules
3. Edit "Workspace settings" in VSCode and choose "Use legacy view engine language service"
4. Run npm-install
5. Profit.