错误 NG6002：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule class
error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
第一次使用 firestore 时遇到此错误。从我的研究来看，这似乎是 Ivy 的问题。我没有太多的修改经验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"
]
}
谢谢！
已根据文档选择退出 Ivy 来修复此问题。
更改 tsconfig.app.json 以选择退出 Ivy。
"enableIvy": false
您的模块尚未被 node ng serve 中的 Angular 服务器加载，因此请重新启动您的服务器，以便服务器加载您刚刚在 [=12= 中添加的模块]
作者：Randd Soft
这对我有用：
1) 停止 ng 服务器
2) 重新安装您的软件包
npm install your-package-name
3) 运行 再次
ng serve
npm cache clean --force -> 清理缓存可能会解决问题。
我已经测试了这里的所有答案，但没有一个对我有用。所以我决定更改 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
此问题将通过在您的 package.json 中添加下面的 postinstall 脚本来解决。
安装 npm 后将 运行。
"scripts": {
"postinstall": "ngcc"
}
Post 添加上面的代码，运行 npm install
升级到 Angular 9+
这对我有用
当您在 imports: [] 而不是 declarations: [] 中添加组件声明时会出现此错误，例如：
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
SomeComponent <-----------wrong
],
当我在 app.module.ts 中导入 MatSnackBar 而不是 MatSnackBarModule 时犯了这个愚蠢的错误。
为我工作
angular.json
"aot": false
这对我有用
停止 ng 服务器(ctrl+c)
运行 再一次
npm start / ng serve --open
只需转到项目中的 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
}
}
我错误地将 service 添加到 imports 数组而不是 providers 数组。
@NgModule({
imports: [
MyService // wrong here
],
providers: [
MyService // should add here
]
})
export class AppModule { }
Angular 表示您需要将 Injectables 添加到 providers 数组中。
我在 Ubuntu 中遇到过同样的问题，因为 Angular 应用程序目录具有 root 权限。将所有权更改为本地用户解决了我的问题。
$ sudo -i
$ chown -R <username>:<group> <ANGULAR_APP>
$ exit
$ cd <ANGULAR_APP>
$ ng serve
我只是将我的导入从 { AngularFirestore} from '@angular/fire/firestore'; 导入
到
import { AngularFirestoreModule } from '@angular/fire/firestore';
并且工作正常
对我来说，我在 Ubuntu
下工作
如果我将 sudo 与 ng
一起使用，错误就会消失
sudo ng build
sudo ng serve
更好的解决方案是使用以下命令授予当前用户对当前文件夹的所需权限：
sudo chown -R `whoami` ./
这样做将使您 运行 无需 sudo 即可执行 ng 命令。
使用错误的导入时（例如使用自动导入时）也会发生这种情况。我们以 MatTimePickerModule 为例。这将给出类似于问题中描述的错误消息：
import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker/lib/timepicker.module';
这应该是
import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
有时，当您在项目中 change/update @NgModule 时，项目得到编译但更改没有得到反映。所以，如果你没有得到它，重新启动一次以获得预期的结果。
ng 服务
为我解决的问题是将 angular material 和适配器的版本与另一个 angular 模块的最低版本相匹配。然后重装&重新运行.
"@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，我的 material 也是 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”，编译成功。
在我的例子中，我通过在 tsconfig.json
中将“strictTemplates”设置回 false 解决了这个问题
{
"compilerOptions": {
// ...
},
"angularCompilerOptions": {
"strictTemplates": false
}
}
我之前将其设置为 true 以防止显示 VStudio 弹出窗口：
当您导入一些未在您的组件中的任何地方使用的 mat 组件时，也会发生这种情况。
如果您导入了所有 mat 组件 app.module.ts 您已经导入了一些 mat 组件并且您没有在 app.module.ts 的 imports 和 exports 数组中使用任何组件意味着没有问题没有错误会正常工作。
如果您为此创建功能模块，假设 ng g m material 这将创建 material.module.ts 文件名。
现在我们必须将所有mat导入语句复制到新创建的功能模块
在复制之前，请记住是否有任何导入语句变灰（某些指示 IDE 显示此名称未被使用）。如果变灰意味着您必须删除这些名称，然后将其复制并粘贴到 MaterialModule imports 和 exports 数组。就这样解决了。
我正在导入 mat-list。我的错误是使用了以下内容：
import { MatList } from "@angular/material/list";
@NgModule({
exports: [
MatList,
]
})
进出口报关单忘记加'Module'后缀。以下解决了问题：
import { MatListModule } from "@angular/material/list";
@NgModule({
exports: [
MatListModule, // <-- Add 'Module' suffix here!
]
})
在我的例子中，问题是从一些本应重复使用的子模块调用 .forRoot()。
App.Module.ts
您可以通过在 Provider 而不是导入或声明中添加注入来解决错误。
里面Service.ts
在 class
上添加 @injectable
例如：
@Injectable()
export class WebApiService { }
即使你给 space 也可能行不通
例如：
@Injectable()
export class WebApiService { }
尝试清除缓存
npm cache clean --forcenpm install
如果
你 运行 npm install 或 yarn install 使用 root 帐户
和
运行 ng serve 使用非根帐户，
你会遇到这个问题。
解决方法：
也用 root 帐户启动服务器
我在创建共享指令时遇到了这个错误。现在最初它进入了应用程序模块的声明数组（默认情况下在我使用 cli 运行 命令之后）。
我把它放到了共享模块 declarations array 和 exports array 中。现在，一旦我将其从 app.module.ts 文件中删除，问题就得到了解决。
问题是它是在 2 个模块（共享和 app.module）中声明的。从 app.module 中删除，瞧！
我在 Angular 12 遇到问题，问题是我的同事定义了页面模块中的组件以及我们在项目中全局使用的通用模块。
已从全局文件模块中删除，问题已解决。
On My Case
就我而言，问题出在最新的节点上。我正在对 Angular 应用程序进行 docker 化并使用最新的节点版本，例如 FROM node:latest as build
要使其正常工作，请使用 Angular 支持的节点版本，例如 FROM node:14.17.4
我的错误：我犯了Module部分，我写
import { MatPaginator } from '@angular/material/paginator';
而不是
import { MatPaginatorModule } from '@angular/material/paginator';
在我的模块中。
当您导入已安装的模块，但缺少一个或多个依赖项时，可能会发生这种情况
我试图将自定义管道添加到我的共享模块，并且我已将其添加到导入和导出中。这就是它导致此问题的原因。
我通过将自定义管道添加到 declarations:[]、exports:[] 和 providers:[].
中解决了这个问题
我通过以下代码解决了这个问题：
@NgModule({
declarations: [
myCustomPipe,
],
exports: [
myCustomPipe,
],
providers: [
myCustomPipe,
]
})
我不知道为什么，但我能解决它的唯一方法是：
- 导入模块而不是组件
- 将文件夹名称 /my-component-y/ 与 MyComponentY.ts 匹配，我有 /component-y/ 和 MyComponentY.ts
根组件是延迟加载的，因为它是用于多站点的，如果有任何区别的话。
最好的解决方案是使用 React/Next.js 而不是这个老掉牙的框架。
第一次使用 firestore 时遇到此错误。从我的研究来看，这似乎是 Ivy 的问题。我没有太多的修改经验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"
]
}
谢谢！
已根据文档选择退出 Ivy 来修复此问题。
更改 tsconfig.app.json 以选择退出 Ivy。
"enableIvy": false
您的模块尚未被 node ng serve 中的 Angular 服务器加载，因此请重新启动您的服务器，以便服务器加载您刚刚在 [=12= 中添加的模块]
作者：Randd Soft
这对我有用：
1) 停止 ng 服务器
2) 重新安装您的软件包
npm install your-package-name
3) 运行 再次
ng serve
npm cache clean --force -> 清理缓存可能会解决问题。
我已经测试了这里的所有答案，但没有一个对我有用。所以我决定更改 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
此问题将通过在您的 package.json 中添加下面的 postinstall 脚本来解决。
安装 npm 后将 运行。
"scripts": {
"postinstall": "ngcc"
}
Post 添加上面的代码，运行 npm install
升级到 Angular 9+
这对我有用当您在 imports: [] 而不是 declarations: [] 中添加组件声明时会出现此错误，例如：
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
SomeComponent <-----------wrong
],
当我在 app.module.ts 中导入 MatSnackBar 而不是 MatSnackBarModule 时犯了这个愚蠢的错误。
为我工作
angular.json
"aot": false
这对我有用
停止 ng 服务器(ctrl+c)
运行 再一次
npm start / ng serve --open
只需转到项目中的 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
}
}
我错误地将 service 添加到 imports 数组而不是 providers 数组。
@NgModule({
imports: [
MyService // wrong here
],
providers: [
MyService // should add here
]
})
export class AppModule { }
Angular 表示您需要将 Injectables 添加到 providers 数组中。
我在 Ubuntu 中遇到过同样的问题，因为 Angular 应用程序目录具有 root 权限。将所有权更改为本地用户解决了我的问题。
$ sudo -i
$ chown -R <username>:<group> <ANGULAR_APP>
$ exit
$ cd <ANGULAR_APP>
$ ng serve
我只是将我的导入从 { AngularFirestore} from '@angular/fire/firestore'; 导入
到
import { AngularFirestoreModule } from '@angular/fire/firestore';
并且工作正常
对我来说，我在 Ubuntu
下工作如果我将 sudo 与 ng
一起使用，错误就会消失sudo ng build
sudo ng serve
更好的解决方案是使用以下命令授予当前用户对当前文件夹的所需权限：
sudo chown -R `whoami` ./
这样做将使您 运行 无需 sudo 即可执行 ng 命令。
使用错误的导入时（例如使用自动导入时）也会发生这种情况。我们以 MatTimePickerModule 为例。这将给出类似于问题中描述的错误消息：
import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker/lib/timepicker.module';
这应该是
import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
有时，当您在项目中 change/update @NgModule 时，项目得到编译但更改没有得到反映。所以，如果你没有得到它，重新启动一次以获得预期的结果。 ng 服务
为我解决的问题是将 angular material 和适配器的版本与另一个 angular 模块的最低版本相匹配。然后重装&重新运行.
"@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，我的 material 也是 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”，编译成功。
在我的例子中，我通过在 tsconfig.json
{
"compilerOptions": {
// ...
},
"angularCompilerOptions": {
"strictTemplates": false
}
}
我之前将其设置为 true 以防止显示 VStudio 弹出窗口：
当您导入一些未在您的组件中的任何地方使用的 mat 组件时，也会发生这种情况。
如果您导入了所有 mat 组件
app.module.ts您已经导入了一些 mat 组件并且您没有在app.module.ts的 imports 和 exports 数组中使用任何组件意味着没有问题没有错误会正常工作。如果您为此创建功能模块，假设
ng g m material这将创建material.module.ts文件名。现在我们必须将所有mat导入语句复制到新创建的功能模块 在复制之前，请记住是否有任何导入语句变灰（某些指示 IDE 显示此名称未被使用）。如果变灰意味着您必须删除这些名称，然后将其复制并粘贴到
MaterialModuleimports 和 exports 数组。就这样解决了。
我正在导入 mat-list。我的错误是使用了以下内容：
import { MatList } from "@angular/material/list";
@NgModule({
exports: [
MatList,
]
})
进出口报关单忘记加'Module'后缀。以下解决了问题：
import { MatListModule } from "@angular/material/list";
@NgModule({
exports: [
MatListModule, // <-- Add 'Module' suffix here!
]
})
在我的例子中，问题是从一些本应重复使用的子模块调用 .forRoot()。
App.Module.ts
您可以通过在 Provider 而不是导入或声明中添加注入来解决错误。
里面Service.ts
在 class
上添加 @injectable
例如：
@Injectable()
export class WebApiService { }
即使你给 space 也可能行不通
例如：
@Injectable()
export class WebApiService { }
尝试清除缓存
npm cache clean --forcenpm install
如果
你 运行 npm install 或 yarn install 使用 root 帐户
和
运行 ng serve 使用非根帐户，
你会遇到这个问题。
解决方法： 也用 root 帐户启动服务器
我在创建共享指令时遇到了这个错误。现在最初它进入了应用程序模块的声明数组（默认情况下在我使用 cli 运行 命令之后）。
我把它放到了共享模块 declarations array 和 exports array 中。现在，一旦我将其从 app.module.ts 文件中删除，问题就得到了解决。
问题是它是在 2 个模块（共享和 app.module）中声明的。从 app.module 中删除，瞧！
我在 Angular 12 遇到问题，问题是我的同事定义了页面模块中的组件以及我们在项目中全局使用的通用模块。
已从全局文件模块中删除，问题已解决。
On My Case
就我而言，问题出在最新的节点上。我正在对 Angular 应用程序进行 docker 化并使用最新的节点版本，例如 FROM node:latest as build
要使其正常工作，请使用 Angular 支持的节点版本，例如 FROM node:14.17.4
我的错误：我犯了Module部分，我写
import { MatPaginator } from '@angular/material/paginator';
而不是
import { MatPaginatorModule } from '@angular/material/paginator';
在我的模块中。
当您导入已安装的模块，但缺少一个或多个依赖项时，可能会发生这种情况
我试图将自定义管道添加到我的共享模块，并且我已将其添加到导入和导出中。这就是它导致此问题的原因。
我通过将自定义管道添加到 declarations:[]、exports:[] 和 providers:[].
中解决了这个问题我通过以下代码解决了这个问题：
@NgModule({
declarations: [
myCustomPipe,
],
exports: [
myCustomPipe,
],
providers: [
myCustomPipe,
]
})
我不知道为什么，但我能解决它的唯一方法是：
- 导入模块而不是组件
- 将文件夹名称 /my-component-y/ 与 MyComponentY.ts 匹配，我有 /component-y/ 和 MyComponentY.ts
根组件是延迟加载的，因为它是用于多站点的，如果有任何区别的话。
最好的解决方案是使用 React/Next.js 而不是这个老掉牙的框架。