未捕获的TypeError：无法读取registerNgModuleType上未定义的属性“ id”-角度PWA

Question

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

ng add @angular/pwa --project appName

我遇到错误

  

core.js：34469未捕获的TypeError：无法读取未定义的属性'id'       在registerNgModuleType

如果我将自己的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数组中放置了一个 component ，其中只有 modules 应该被“声明”。该组件应位于declarations数组中。

Answer 2

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

我通过停用一个名为 Angular Language Service 的 VS Code 扩展并删除 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 3

就我而言，此错误似乎是随机发生的。一会儿它正在工作，而下一刻却没有。已知的工作提交也被破坏了。

我不得不删除node_modules并重新安装它们，从而解决了问题。

Answer 4

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

Answer 5

您应该运行此命令来构建您的角度应用ng build --prod，角度将向您显示错误详细信息。

对于我来说，我是从Angular Material导入错误的库。

node_modules/@angular/material/button/button.d.ts：22：22中的错误- 错误NG6002：出现在ListeningModule的NgModule.imports中，但是 无法解析为NgModule类。

这可能意味着库（@ angular / material / button） 宣告ngcc尚未正确处理MatButton，或未 与Angular Ivy兼容。检查是否有较新版本的库 可用，如果可以，请进行更新。同时考虑与 图书馆的作者，看看图书馆是否应该兼容 与常春藤。

Answer 6

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

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

Answer 7

在我的情况下，这个错误似乎是随机发生的。我不得不删除 node_modules 并重新安装它们以解决问题。但再次打开项目运行时折扣有错误

Answer 8

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

rm -rf node_modules
npm install

Answer 9

正如jai所说，当我在imports部分中添加了一个组件时，我遇到了这个问题。 组件应在声明部分中。将SearchFilterComponent移至声明即可解决此问题。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { routes } from './admin-settings-menu-routing';
import { HomeComponent } from './home.component';
import { SearchFilterComponent } from '../dashboard/common/search-filter/search-filter.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
   SearchFilterComponent   //Should not be declared here
  ],
  providers: []
})
export class AdminMenuModule { }

Answer 10

快速修复。只要确保仅在components数组中声明了组件，仅在imports数组中声明了导入的模块，而在providers数组中则声明了服务。

Answer 11

我有同样的问题，我已经解决了。我在 node_modules/angular/* 中找到了一些东西，这意味着 Ivy 可以工作，所以我在 tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"]
  },
  "exclude": [
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

Answer 12

在 Angular 8 上， 我禁用了 Angular 语言服务 但是，rm-rf node_modules 不起作用，我只是在 Windows 上正常删除。 我必须以管理员身份运行 powershell，然后 npm install 然后将 vs code 中的 Angular Language Service Extension 从 12 降级到 v11.2.13。

它对我有用。

Answer 13

尝试使用 npx ngcc

Follow github link for answer