错误 NG6002：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类答案

【问题标题】：error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class错误 NG6002：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类
【发布时间】：2020-06-03 00:43:04
【问题描述】：

第一次使用 Firestore，我收到了这个错误。根据我的研究，这似乎是常春藤的问题。我没有很多修改 tsconfig.app.json 的经验，这是我一直指向的方向，遵循其他答案。

我能够从原始项目中修改的唯一一件事是使用 Angular Fire 6 而不是 5，我最初这样做是为了遵循教程。

这是 package.json：

{
  "name": "language",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.1",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/fire": "^6.0.0-rc.1",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.0.1",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "firebase": "^7.8.2",
    "rxjs": "~6.5.4",
    "rxjs-compat": "^6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.2",
    "@angular/cli": "~9.0.2",
    "@angular/compiler-cli": "~9.0.1",
    "@angular/language-service": "~9.0.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.7.5",
    "@angular-devkit/architect": "^0.900.0-0 || ^0.900.0",
    "firebase-tools": "^7.12.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "language": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/language",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "language:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "language:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "language:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "language:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "language:serve:production"
            }
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }
      }
    }
  },
  "defaultProject": "language"
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
  
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

谢谢！

【问题讨论】：

重启控制台帮了我
复制组件错误地嵌套在多个模块中。要求更好的错误描述：github.com/angular/angular/issues/40616
在NgModule之前错过@也会出现这个错误

标签： angular google-cloud-firestore angularfire

【解决方案1】：

Angular 服务器尚未在 node ng serve 中加载您的模块，因此请重新启动服务器，以便服务器加载您刚刚在 @NgModule app.module.ts 中添加的模块

【讨论】：

我发现很多次重启服务器或重启 IDE 都可以解决问题：D
嗨，我仍然遇到 mono-repo 工作区的问题。它有根 node_modules。
我仍然发现我发誓自从我进行了这样的更改后，我已经重新启动了，但是......结果我没有并且重新启动修复了它。感谢您提醒我在使用谷歌搜索之前我需要“关闭并重新打开”！
您需要重新启动 VSCode 才能让 Angular 语言服务重新编译包。
其实angular应该会在错误日志本身提供提示重启和检查！

【解决方案2】：

当您在imports: [] 而不是declarations: [] 中添加组件声明时会显示此错误，例如：

declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  AppRoutingModule,
  SomeComponent <-----------wrong
],

【讨论】：

我不同意 - 这不是我（或其他许多人）的答案。
这对我来说是正确的答案，但我不得不重新开始
谢谢 - 模块 vs 组件 - 哎呀 - 很明显......感谢今晚成为“与熊交谈”......
非常感谢。有什么原因我们不能像上面那样使用吗？
有趣的是，我上次看到这个页面时，我需要的答案来自 @Arbahud-Rio-Daroyni。现在是这个。

【解决方案3】：

当我犯了在app.module.ts 中导入MatSnackBar 而不是MatSnackBarModule 的愚蠢错误时，我收到了这个错误。

【讨论】：

Fellow Bonehead here - MatCheckboxModule - 你的回答很有用，谢谢
培训材料很棒，但你真的是边做边学:)
HttpClient 也发生了同样的事情。在我的 app.module.ts 中将 HttpClient 更新为 HttpClientModule，问题已解决。
多年来我第一次登录只是为了说声谢谢 ;)
sigh...MatAutocompleteModule - 如果没有您的评论，我不知道我需要多长时间才能意识到，谢谢。

【解决方案4】：

我将service 添加到imports 数组而不是providers 数组中犯了一个错误。

@NgModule({
  imports: [
    MyService // wrong here
  ],
  providers: [
    MyService // should add here
  ]
})
export class AppModule { }

Angular 表示您需要将Injectables 添加到providers 数组中。

【讨论】：

完全同意这一点。在我使用 ng12 的情况下，我从使用 ngx-clipboard 切换到现在的“内置角度”@angular/cdk/clipboard。我正确导入了 ClipboardModule，但“剪贴板”导出实际上是一项服务。将它从 Exports 中删除并放入 Providers 对我来说是诀窍。

【解决方案5】：

通过根据文档选择退出 Ivy 来修复它。

https://angular.io/guide/ivy

更改 tsconfig.app.json 以退出 Ivy。

"enableIvy": false

【讨论】：

伙计们，禁用即将成为 Angular 唯一渲染引擎的 Ivy 不是可行的方法。我了解您是否需要尽快推送到prod，但您应该诊断并找出真正导致您的问题的原因。
@AaronJordan 我认为问题在于 Ivy没有准备好生产，这与 Angular 团队所说的相反。生产就绪升级不应该有 Ivy 的错误数量接近。此外，出于向后兼容性的原因，View Engine 不会很快消失（这与 Angular 库构建仍然发生在 View Engine 中而不是 Ivy 中的原因相同）
@u 啊...我没有看到 Ivy 有很多错误。您的参考资料在哪里？
在大多数情况下@AaronJordan 是对的。但是我发现在开发本地库和热加载到另一个项目时禁用 Ivy 更稳定。相关答案：https://stackoverflow.com/a/61527483/212700

【解决方案6】：

有时当您在项目中更改/更新 @NgModule 时，项目会被编译，但更改不会得到反映。所以，如果你没有得到它，重新启动一次以获得预期的结果。 ng 服务

【讨论】：

为我节省了很多时间，谢谢。现在应该已经知道了。

【解决方案7】：

这对我有用：

1) 停止 ng 服务器

2) 重新安装你的包

npm install your-package-name

3) 再次全部运行

ng serve

【讨论】：

【解决方案8】：

使用错误的导入（例如使用自动导入时）也会发生这种情况。我们以 MatTimePickerModule 为例。这将给出类似于问题中描述的错误消息：

import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker/lib/timepicker.module';

这应该是

import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';

【讨论】：

只是我的一分钱。该文件的导入为import { MatFormField, MatHint, MatLabel } from '@angular/material/form-field';。应该改为import { MatFormFieldModule } from '@angular/material/form-field'; 当导入错误时，也会发生同样的错误。我花了1小时。我几乎要禁用常春藤。 我使用的是 Angular 11 版

【解决方案9】：

在我的情况下，我通过在 tsconfig.json

中将“strictTemplates”设置回 false 解决了这个问题

{
  "compilerOptions": {
    // ...
  },
  "angularCompilerOptions": {
    "strictTemplates": false
  }
}

我之前已将此设置为 true 以防止显示 VStudio 弹出窗口：

【讨论】：

为我工作谢谢，尽管是常春藤之前的版本：angular8

【解决方案10】：

对我来说，我在 Ubuntu 下工作

如果我将 sudo 与 ng

一起使用，错误就会消失

sudo ng build
sudo ng serve

更好的解决方案是使用以下命令授予当前用户对当前文件夹所需的权限：

sudo chown -R `whoami` ./

这样做可以让您在不使用 sudo 的情况下运行 ng 命令。

【讨论】：

这个答案帮助我解决了我的问题
您可能已经以 root 身份安装了一些东西。也许是时候使用用户帐户再次检查项目并在那里构建它了。使用 root 的问题是您可能会意外安装一个错误的 npm 包并最终导致系统被黑。有关如何重置安全性，请参阅 Shankar Ganesh 的回答。
与此处使用 root 创建的项目相同

【解决方案11】：

这对我有用

停止 ng 服务器(ctrl+c)
再次运行
```
npm start / ng serve --open
```

【讨论】：

【解决方案12】：

我在 Ubuntu 中遇到了同样的问题，因为 Angular 应用程序目录具有 root 权限。将所有权更改为本地用户为我解决了这个问题。

$ sudo -i
$ chown -R <username>:<group> <ANGULAR_APP>
$ exit 
$ cd <ANGULAR_APP>
$ ng serve

【讨论】：

哇，你拯救了我的一天！我的 Angular 代码在 Docker 中，所有文件都属于“root”。 Angular 无法访问文件，并给了我这个神秘的错误！

【解决方案13】：

这个问题将通过在您的package.json 中添加下面的postinstall 脚本来解决。

它将在 npm 安装后运行。

"scripts": {
   "postinstall": "ngcc"
}

添加上述代码后，运行npm install

升级到 Angular 9+ 时这对我有用

【讨论】：

【解决方案14】：

为我工作

angular.json

"aot": false

【讨论】：

【解决方案15】：

为我解决的问题是将角材料和适配器的版本与另一个角模块的最低版本相匹配。然后重新安装并重新运行。

    "@angular-devkit/schematics": "^10.1.2",
    "@angular/animations": "^10.1.2",
    "@angular/cdk": "^10.2.1",
    "@angular/common": "10.1.2",
    "@angular/compiler": "10.1.2",
    "@angular/core": "10.1.2",
    "@angular/forms": "10.1.2",
    "@angular/localize": "^10.1.2",
    "@angular/material": "^10.2.1",
    "@angular/material-moment-adapter": "^10.2.1",
    "@angular/platform-browser": "10.1.2",
    "@angular/platform-browser-dynamic": "10.1.2",
    "@angular/router": "10.1.2",

如您所见，我的 cdk 是 10.2.1，我的材料也是 10.2.1。我看到使用的最低版本是 10.1.2，所以我更改了版本：

    "@angular/material": "^10.1.2", (was 10.2.1)
    "@angular/material-moment-adapter": "^10.1.2", (was 10.2.1)

到10.1.2，运行“npm install”，然后“ng serve”，编译成功。

【讨论】：

【解决方案16】：

我正在导入mat-list。我的错误是使用以下内容：

import { MatList } from "@angular/material/list";
@NgModule({
  exports: [
    MatList,
  ]
})

我忘记在进出口报关单后附加“模块”后缀。以下解决了问题：

import { MatListModule } from "@angular/material/list";
@NgModule({
  exports: [        
    MatListModule,
  ]
})

【讨论】：

【解决方案17】：

尝试清除缓存

npm clear cache -force
npm install

【讨论】：

【解决方案18】：

我在 Angular 12 上遇到问题，问题是我的同事在页面模块中定义了组件，以及我们在项目中全局使用的通用模块。

从全局文件模块中删除，问题已解决。

On My Case

【讨论】：

【解决方案19】：

npm cache clean --force -> 清理缓存可能会解决问题。

【讨论】：

【解决方案20】：

我在这里测试了所有答案，但没有一个对我有用。所以我决定更改angular.js 文件。那里有一个aot 选项，这是真的。然后我将其更改为 false 并且错误消失了！

"options": {
            "outputPath": "dist/DateMeUI",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false, // here you have to change
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },

但是，我知道在我的项目中找不到“tsconfig.app.json”（也许你必须手动添加它）通过这个文件你可以像其他人提到的那样设置"enableIvy": false它。 tsconfig.app.json

【讨论】：

将 aot 设置为 false，生产中可能会出现问题。这不是一个好的解决方案。

【解决方案21】：

我只是将我的导入更改为从 { AngularFirestore} from '@angular/fire/firestore'; 导入到 import { AngularFirestoreModule } from '@angular/fire/firestore';

一切正常

【讨论】：

【解决方案22】：

当您导入一些未在组件中任何地方使用的 mat 组件时也会发生这种情况。

如果您在app.module.ts 中导入了所有垫子组件，则您已经导入了一些垫子组件，并且您没有在app.module.ts 中的导入和导出数组中使用任何组件意味着没有问题，没有错误会正常工作。
如果您为此创建功能模块，比如说ng g m material，这将创建material.module.ts 文件名。
现在我们必须将所有 mat 导入语句复制到新创建的功能模块在复制之前，请记住任何导入语句是否变灰（某些指示 IDE 显示未使用此名称）。如果灰显意味着您必须删除这些名称，然后将其复制并粘贴到 MaterialModule 导入和导出数组。这样就解决了。

【讨论】：

【解决方案23】：

如果您使用 root 帐户运行 npm install 或 yarn install 和使用非 root 帐户运行 ng serve，你会遇到这个问题。

解决方法： 也使用 root 帐户启动服务器

【讨论】：

【解决方案24】：

我的错误：我写了

import { MatPaginator } from '@angular/material/paginator';

而不是

import { MatPaginatorModule } from '@angular/material/paginator';

在我的模块中。

【讨论】：

【解决方案25】：

只需转到项目中的 tsconfig.app.json 并从中删除所有内容

复制下面的代码并粘贴。它会解决你的问题:)

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
  },

  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

【讨论】：

【解决方案26】：

在我的情况下，问题是从一些打算重复使用的子模块调用.forRoot()。

【讨论】：

【解决方案27】：

App.Module.ts

您可以通过在Provider not imports or declarations中添加injectables来解决错误。
Service.ts 内部

在类上添加 @injectable

例如：

@Injectable()
 export class WebApiService {   }

即使你给空间也可能行不通

例如：

@Injectable()


export class WebApiService {    }

【讨论】：

【解决方案28】：

我在创建共享指令时遇到了这个错误。现在最初它进入了应用程序模块的声明数组（默认情况下，在我使用 cli 运行命令之后）。

我将它放入共享模块 declarations array 和 exports array。现在，只要我从 app.module.ts 文件中删除它，问题就解决了。

问题在于它是在 2 个模块（shared 和 app.module）中声明的。从 app.module 中删除，瞧！

【讨论】：

【解决方案29】：

就我而言，问题出在最新的节点上。我正在对接 Angular 应用程序并使用最新的节点版本，例如 FROM node:latest as build

要使其正常工作，请使用 Angular 支持的节点版本，例如 FROM node:14.17.4

【讨论】：

【解决方案30】：

当您导入已安装的模块，但缺少一个或多个依赖项时，可能会发生这种情况

【讨论】：