Angular 9 or 10 + Angular Material 10: import could not be resolved to an NgModule class
I did a new project with Angular 9 and last version of material. When I imported some Material's classes, I had this error:
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"
}
}
I tried to delete node_modules and install it again. Also, I update Angular version to 10 and Material version, but the problem persisted.
I review other similar issues, but non of the solutions fix my problem.
Answer
MatLabel and MatHint are include in the MatFormFieldModule, you don't have to import them. Import only MatFormFieldModule as described in the documentation
import {MatFormFieldModule} from '@angular/material/form-field';
@NgModule({
imports: [MatFormFieldModule],
exports: [MatFormFieldModule],
})