未捕获的类型错误：无法读取 registerNgModuleType 处未定义的属性“id” - angular PWA

Question

将@angular/pwa 添加到我的应用程序后

ng add @angular/pwa --project appName

我得到错误

core.js:34469 未捕获的类型错误：无法读取 registerNgModuleType 处未定义的属性“id”

如果我appName.module.ts从进口中移除

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

应用程序再次运行。

添加了 Angular.json

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

这是我的 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

当您混淆imports并declarations在相关模块中（或其他一些此类混淆）时，通常会发生这种情况。
例如，您可能在数组中放置了一个组件imports，其中只应“声明”模块。
该组件应该在declarations数组中。

Answer 2

在我的情况下，这个错误似乎是随机发生的。上一刻它起作用了，下一刻它不起作用。已知的工作提交也被破坏了。

我不得不删除node_modules并重新安装它们以解决问题。

Answer 3

就我而言，我正在运行 Angular 8 并且我的项目突然停止工作（我假设在 VS 代码更新 v 1.56.2 之后）

我通过停用名为的 VS Code 扩展Angular Language Service并删除 node_modules 文件夹来解决此问题。

然后我运行npm install，我的项目从此开始工作。

我的包 json 依赖项

{
...
"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

对我来说，这个问题与 VSCode 插件“Angular Language Service”有关。我将插件升级到最新版本，然后开始出现此错误。我正在写一个新答案，因为我仍然想使用 ALS，所以这里是为在我的案例 8 中使用 ALS（最新）和旧版本 Angular 的人解决该问题的步骤。

基本上发生的事情是新版本的 ALS 使用 IVY 引擎，它在 node_modules 中创建了一堆与旧版本的 Angular 不兼容的文件，因此以下步骤将修复该问题。

1. 升级到最新的 ALS (13.1.0)
2. 删除节点模块
3. 在 VSCode 中编辑“工作区设置”并选择“使用旧版视图引擎语言服务”
4. 运行 npm 安装
5. 利润。

Answer 5

在 2021 年，我在 8 Angular 上遇到了这个问题，只需删除 node_modules 并重新安装它 - 问题就解决了。所以：

rm -rf node_modules
npm install

Answer 6

imports当您在模块的数组中导入了错误的模块时，也可能会发生这种情况。有一次，在使用反应式表单时，我错误地添加了FormBuilder内部导入，而不是ReactiveFormsModule它给了我类似的错误。

看起来这个错误可能来自多种原因。

Answer 7

禁用导致问题的任何编辑器扩展。就我而言，它是 Visual Studio 代码的 angular 语言服务扩展，重新安装 node_modules 并重新启动 angular cli 和编辑器。

Answer 8

1. 禁用vs 代码 扩展Angular Language Service
2. 删除节点模块( rm -rf node_modules)
3. 使用重新安装节点模块npm i