Angular 9 或 10 + Angular Material 10：无法将导入解析为 NgModule class
Angular 9 or 10 + Angular Material 10: import could not be resolved to an NgModule class
我用 Angular 9 和 material 的最新版本做了一个新项目。当我导入一些 Material 的 类 时，出现了这个错误：
ERROR in node_modules/@angular/material/form-field/label.d.ts:10:22 - error NG6002: Appears in the NgModule.imports of MaterialModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/form-field) which declares MatLabel has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
10 export declare class MatLabel {
~~~~~~~~
node_modules/@angular/material/form-field/hint.d.ts:20:22 - error NG6002: Appears in the NgModule.imports of MaterialModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/form-field) which declares MatHint has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
20 export declare class MatHint {
~~~~~~~
src/app/material.module.ts:12:14 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
Is it missing an @NgModule annotation?
12 export class MaterialModule {}
~~~~~~~~~~~~~~
ERROR in node_modules/@angular/material/form-field/label.d.ts:10:22 - error NG6002: Appears in the NgModule.imports of MaterialModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/form-field) which declares MatLabel has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
10 export declare class MatLabel {
~~~~~~~~
node_modules/@angular/material/form-field/hint.d.ts:20:22 - error NG6002: Appears in the NgModule.imports of MaterialModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/form-field) which declares MatHint has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
20 export declare class MatHint {
~~~~~~~
src/app/material.module.ts:12:14 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
Is it missing an @NgModule annotation?
12 export class MaterialModule {}
~~~~~~~~~~~~~~
material.module.ts
import { NgModule } from '@angular/core';
import {
MatFormFieldModule,
MatLabel,
MatHint,
} from '@angular/material/form-field';
@NgModule({
imports: [MatFormFieldModule, MatLabel, MatHint],
exports: [MatFormFieldModule, MatLabel, MatHint],
})
export class MaterialModule {}
app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MaterialModule } from './material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CarouselComponent } from './carousel/carousel.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CrudComponent } from './crud/crud.component';
import { ProfileComponent } from './profile/profile.component';
import { LayoutComponent } from './layout/layout.component';
import { FooterComponent } from './layout/footer/footer.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { LoginComponent } from './login/login.component';
import { PrivHeaderComponent } from './layout/priv-header/priv-header.component';
import { PrivMenuComponent } from './layout/priv-menu/priv-menu.component';
import { MainMenuComponent } from './layout/main-menu/main-menu.component';
import { MainHeaderComponent } from './layout/main-header/main-header.component';
@NgModule({
declarations: [
AppComponent,
CarouselComponent,
DashboardComponent,
CrudComponent,
ProfileComponent,
LayoutComponent,
FooterComponent,
HomeComponent,
AboutComponent,
LoginComponent,
PrivHeaderComponent,
PrivMenuComponent,
MainMenuComponent,
MainHeaderComponent,
],
imports: [
BrowserModule,
FormsModule,
MaterialModule,
ReactiveFormsModule,
AppRoutingModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
package.json
{
"name": "mini-aplicacion",
"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": "~10.0.5",
"@angular/cdk": "^10.1.0",
"@angular/common": "~10.0.5",
"@angular/compiler": "~10.0.5",
"@angular/core": "~10.0.5",
"@angular/forms": "~10.0.5",
"@angular/material": "^10.1.0",
"@angular/platform-browser": "~10.0.5",
"@angular/platform-browser-dynamic": "~10.0.5",
"@angular/router": "~10.0.5",
"rxjs": "~6.5.4",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.4",
"@angular/cli": "~10.0.4",
"@angular/compiler-cli": "~10.0.5",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.7"
}
}
我尝试删除 node_modules 并重新安装。另外，我将 Angular 版本更新为 10 和 Material 版本，但问题仍然存在。
我查看了其他类似问题，但没有一个解决方案可以解决我的问题。
MatLabel 和 MatHint 包含在 MatFormFieldModule 中，您不必导入它们。只按照描述导入 MatFormFieldModule in the documentation
import {MatFormFieldModule} from '@angular/material/form-field';
@NgModule({
imports: [MatFormFieldModule],
exports: [MatFormFieldModule],
})
我用 Angular 9 和 material 的最新版本做了一个新项目。当我导入一些 Material 的 类 时，出现了这个错误：
ERROR in node_modules/@angular/material/form-field/label.d.ts:10:22 - error NG6002: Appears in the NgModule.imports of MaterialModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/form-field) which declares MatLabel has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
10 export declare class MatLabel { ~~~~~~~~ node_modules/@angular/material/form-field/hint.d.ts:20:22 - error NG6002: Appears in the NgModule.imports of MaterialModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/form-field) which declares MatHint has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
20 export declare class MatHint { ~~~~~~~ src/app/material.module.ts:12:14 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
Is it missing an @NgModule annotation?
12 export class MaterialModule {} ~~~~~~~~~~~~~~
ERROR in node_modules/@angular/material/form-field/label.d.ts:10:22 - error NG6002: Appears in the NgModule.imports of MaterialModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/form-field) which declares MatLabel has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
10 export declare class MatLabel { ~~~~~~~~ node_modules/@angular/material/form-field/hint.d.ts:20:22 - error NG6002: Appears in the NgModule.imports of MaterialModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/form-field) which declares MatHint has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
20 export declare class MatHint { ~~~~~~~ src/app/material.module.ts:12:14 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
Is it missing an @NgModule annotation?
12 export class MaterialModule {} ~~~~~~~~~~~~~~
material.module.ts
import { NgModule } from '@angular/core';
import {
MatFormFieldModule,
MatLabel,
MatHint,
} from '@angular/material/form-field';
@NgModule({
imports: [MatFormFieldModule, MatLabel, MatHint],
exports: [MatFormFieldModule, MatLabel, MatHint],
})
export class MaterialModule {}
app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MaterialModule } from './material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CarouselComponent } from './carousel/carousel.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CrudComponent } from './crud/crud.component';
import { ProfileComponent } from './profile/profile.component';
import { LayoutComponent } from './layout/layout.component';
import { FooterComponent } from './layout/footer/footer.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { LoginComponent } from './login/login.component';
import { PrivHeaderComponent } from './layout/priv-header/priv-header.component';
import { PrivMenuComponent } from './layout/priv-menu/priv-menu.component';
import { MainMenuComponent } from './layout/main-menu/main-menu.component';
import { MainHeaderComponent } from './layout/main-header/main-header.component';
@NgModule({
declarations: [
AppComponent,
CarouselComponent,
DashboardComponent,
CrudComponent,
ProfileComponent,
LayoutComponent,
FooterComponent,
HomeComponent,
AboutComponent,
LoginComponent,
PrivHeaderComponent,
PrivMenuComponent,
MainMenuComponent,
MainHeaderComponent,
],
imports: [
BrowserModule,
FormsModule,
MaterialModule,
ReactiveFormsModule,
AppRoutingModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
package.json
{
"name": "mini-aplicacion",
"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": "~10.0.5",
"@angular/cdk": "^10.1.0",
"@angular/common": "~10.0.5",
"@angular/compiler": "~10.0.5",
"@angular/core": "~10.0.5",
"@angular/forms": "~10.0.5",
"@angular/material": "^10.1.0",
"@angular/platform-browser": "~10.0.5",
"@angular/platform-browser-dynamic": "~10.0.5",
"@angular/router": "~10.0.5",
"rxjs": "~6.5.4",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.4",
"@angular/cli": "~10.0.4",
"@angular/compiler-cli": "~10.0.5",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.7"
}
}
我尝试删除 node_modules 并重新安装。另外，我将 Angular 版本更新为 10 和 Material 版本，但问题仍然存在。
我查看了其他类似问题，但没有一个解决方案可以解决我的问题。
MatLabel 和 MatHint 包含在 MatFormFieldModule 中，您不必导入它们。只按照描述导入 MatFormFieldModule in the documentation
import {MatFormFieldModule} from '@angular/material/form-field';
@NgModule({
imports: [MatFormFieldModule],
exports: [MatFormFieldModule],
})