MatToolbar throws error when using it with Angular

问题:

Angular version 9.2.0

When I import the MatToolbarModule in a module and use it in the html template, then I get the following error message:

This likely means that the library (@angular/material/toolbar) which declares MatToolbarModule 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.

8 export declare class MatToolbarModule {
                       ~~~~~~~~~~~~~~~~
src/app/angular-material.module.ts:53:14 - error NG6002: Appears in the NgModule.imports of ComponentsModule, but itself has errors

Does anyone face the same issue?

回答1:

Add below specific configuration in package.json and npm install.

{
  "scripts": {
    "postinstall": "ngcc"
  }
}

Reference: https://angular.io/guide/ivy#speeding-up-ngcc-compilation

回答2:

I had the same problem before, it's because u modify your module file while the server is running try to stop it and then run it again by : ng serve hope that will help you or someone else

回答3:

I solved it by removing the node_modules and reinstalled it.

Complete discussion here: https://github.com/angular/components/issues/18637

回答4:

I imported some classes(FormControl, FormGroup, Validators) which are not modules in app.module.ts
I removed those classes and it solved my problem.

回答5:

What worked for me is importing the whole module for MatToolbar.

import {MatToolbarModule} from '@angular/material/toolbar'; 

And then adding MatToolbarModule to the imports[] array in my app.module.ts.