'MatFormFieldModule' does not appear to be an NgModule class

483 Views Asked by At

Im getting this error importing angular material.

'MatFormFieldModule' does not appear to be an NgModule class.(-996002) form-field-module.d.ts(10, 3): This likely means that the library (@angular/material/form-field) which declares MatFormFieldModule 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.

My dependencies:

```
@angular-devkit/architect       0.1202.18
@angular-devkit/build-angular   12.2.18
@angular-devkit/core            12.2.18
@angular-devkit/schematics      12.2.9
@angular/cdk                    12.2.13
@angular/cli                    12.2.9
@angular/material               12.2.13
@schematics/angular             12.2.9
rxjs                            6.6.7
typescript                      4.3.5
```

I already tried:

  • "postinstall": "ngcc"
  • remove node_modules, clear cache, install node_modules
  • different versions of angular cli and angular material

My shared.module.ts:

import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    HttpClientModule,
    MatFormFieldModule
  ],
  exports: [
    MatFormFieldModule
    HttpClientModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SharedModule {}
2

There are 2 best solutions below

1
On

Replace below code in your shared module.

import { MatFormFieldModule } from "@angular/material/form-field";
    
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    HttpClientModule,
    MatFormFieldModule
  ],
  exports: [
    MatFormFieldModule
    HttpClientModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SharedModule {}
0
On

This worked for me:

  • deleted "node_modules"
  • deleted "package-lock.json"
  • npm i