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

时间：2020-02-18 22:24:39

标签： angular google-cloud-firestore angularfire

第一次使用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"
  ]
}

谢谢！

34 个答案:

答案 0 :(得分：101)

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

答案 1 :(得分：41)

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

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

答案 2 :(得分：17)

通过根据文档选择退出Ivy来修复此问题。

https://angular.io/guide/ivy

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

"enableIvy": false

答案 3 :(得分：12)

有时，当你改变/更新的 @NgModule 在你的项目中，项目被编译，但是变化没有得到反映。因此，重启一次得到预期的结果，如果你不明白这一点。 的纳克服务

答案 4 :(得分：11)

这对我有用：

1）停止ng服务器

2）重新安装您的软件包

npm install your-package-name

3）重新运行所有

ng serve

答案 5 :(得分：9)

当我犯了一个错误：在MatSnackBar中导入MatSnackBarModule而不是app.module.ts时出现了这个错误。

答案 6 :(得分：5)

就我而言，我通过在 tsconfig.json

中将“strictTemplates”设置回 false 解决了这个问题 
{
  "compilerOptions": {
    // ...
  },
  "angularCompilerOptions": {
    "strictTemplates": false
  }
}

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

enter image description here

答案 7 :(得分：4)

只需使用命令npm start重新启动服务器就可以了。谢谢大家的建议。

答案 8 :(得分：3)

我在向service数组而不是imports数组中添加了providers时出错。 

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

Angular说，您需要将Injectables添加到providers数组中。

答案 9 :(得分：2)

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

    "@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”，编译成功。

答案 10 :(得分：2)

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

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

应该改为

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

答案 11 :(得分：1)

在您的“ tsconfig.app.json”中 添加以下行

“ angularCompilerOptions”：{ “ enableIvy”：假 }

要添加到哪里？ 紧跟在代码行之后 “排除”：[“ src / test.ts”，“ src / ** / *。spec.ts”]，

答案 12 :(得分：1)

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

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

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

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

答案 13 :(得分：1)

这对我有用

  1. 停止ng服务器（ctrl + c）

  2. 再次运行

    npm start / ng serve --open

答案 14 :(得分：1)

npm cache clean --force->清理缓存也许可以解决问题。

答案 15 :(得分：1)

我已经在这里测试了所有答案，但是没有一个对我有用。因此，我决定更改angular.js文件。这里有一个aot选项，它是正确的。然后我将其更改为错误，错误消失了！

"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

答案 16 :(得分：1)

重新启动服务器， 意味着停止ng服务，然后像（ng服务）重新开始，您的问题将得到解决。

在package.json中进行任何更改时，您需要重新启动ng服务器

答案 17 :(得分：1)

为我工作

angular.json 

"aot": false

答案 18 :(得分：0)

对我来说，我在Ubuntu下工作

如果我在 ng

中使用 sudo ，错误消失了 
sudo ng build
sudo ng serve

答案 19 :(得分：0)

如果 您使用 root 帐户运行 Sub GetValueFromTable() Dim tbl1 As ListObject, tbl3 As ListObject With ThisWorkbook.Worksheets("Inventory Mgr") Set tbl1 = .ListObjects("Table6") Set tbl3 = .ListObjects("Table3") tbl3.ListColumns("Listing Title").DataBodyRange.FormulaR1C1 = "=VLOOKUP([Item ID],Table6[#All],4,FALSE)" End With End Sub 或 npm install 和 使用非 root 帐户运行 yarn install， 你会遇到这个问题。

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

答案 20 :(得分：0)

尝试清除缓存

  1. npm clear cache -force
  2. npm install

答案 21 :(得分：0)

  1. App.Module.ts

    您可以通过在Provider not imports 或声明中添加注入项来解决该错误。

  2. Service.ts 内部

    在类上添加@injectable

例如：

@Injectable()
 export class WebApiService {   }

即使你给空间也可能不起作用

例如：

@Injectable()


export class WebApiService {    }

答案 22 :(得分：0)

就我而言，问题是从一些要重复使用的子模块调用 .forRoot()。

答案 23 :(得分：0)

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

  • 如果你已经导入了所有的 mat 组件 app.module.ts 你已经导入了一些 mat 组件并且你没有在 app.module.ts 的导入和导出数组中使用任何组件意味着没有问题没有错误会抛出工作正常。

  • 如果您为此创建功能模块，让我们说 ng g m material 这将创建 material.module.ts 文件名。

  • 现在我们必须将所有 mat 导入语句复制到新创建的功能模块中 在复制之前请记住任何导入语句是否变灰（某些指示 IDE 显示未使用此名称）。如果变灰意味着您必须删除这些名称，然后将其复制并粘贴到 MaterialModule 导入和导出数组。解决了。​​

答案 24 :(得分：0)

此问题将通过在您的:to_date中添加以下postinstall脚本来解决。

它将在安装npm后运行。

package.json

添加上述代码后，运行"scripts": { "postinstall": "ngcc" }

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

答案 25 :(得分：0)

添加服务类时出现此错误。我在Angular 9 Went中使用了几种解决方案，没有任何帮助解决该问题。如果你尝试了一切 确保您在服务内部的核心库中添加了ng模块参考。参见图

答案 26 :(得分：0)

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

运行正常

答案 27 :(得分：0)

当我继续运行 ng服务并尝试导入相同的模块（例如 RouterModule 等）时，此错误对我来说经常发生。

每次重新启动应用程序对我来说都很正常（ ng服务）。

答案 28 :(得分：0)

我有同样的问题。我遵循了以下步骤（按照这个确切的顺序，这非常重要）：

  1. 在“ app.module.ts”中创建子组件
  2. 构建应用程序
  3. 创建父组件
  4. 构建应用程序
  5. 创建HTML存档
  6. 构建应用程序

发生这种情况的主要原因是Angular不会以正确的顺序（即在HTML之前）构建这些模块。

例如我的代码：

  <mat-toolbar> <!-- 2 -->
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
      <mat-icon>favorite</mat-icon> <!-- 1 -->
    </button>
    <span>My App</span>
    <span class="example-spacer"></span>
    <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    </button>
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    </button>
  </mat-toolbar>

答案 29 :(得分：0)

尝试重新启动服务器，然后使用 npm start

重新启动服务器

答案 30 :(得分：0)

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

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

答案 31 :(得分：0)

只需转到项目中的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
  }
}

答案 32 :(得分：0)

重新启动服务器可能并不总是有效。导入 MatFormFieldModule 时出现此错误。

在 app.module.ts 中，我导入了 MatFormField 而不是 MatFormFieldModule ，这会导致此错误。

现在更改它并重新启动服务器，希望此答案对您有所帮助。

答案 33 :(得分：0)

我收到此错误消息是因为我试图在新模块中导入组件，而不是在声明了组件的其他模块中导入。

从我的新模块中删除组件导入，然后导入另一个模块，为我解决了这个问题。

相关问题
最新问题