Search code examples
angularangular11

Angular Material elements are not known element error

I have a dashboard component in an Angular project that utilizes Angular Material elements like so:

<mat-card fxFlex fxFill>
  <mat-card-title fxLayout="column" fxLayoutAlign="center center">
    <span class="mat-title">My Dashboard</span>
  </mat-card-title>
</mat-card>

And all the Angular Material components are giving me this error of no known element error. I thought perhaps I needed to import the MatCardModule into the app routing module and then export it but that did nothing, so I am unsure what is behind this error.

The error says:

'mat-card-title' is not a known element:
1. If 'mat-card-title' is an Angular component, then verify that it is part of this module.
2. If 'mat-card-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Solution

  • You must be using a lazy loaded module, if the import of MatCardModule didn't work on the component, so you need to go to the module where the component is declared inside declarations and then add the MatCardModule inside the imports of that module. An alternative, is to create a shared module called MaterialModule where you import all the needed material modules and import inside the individual lazy loaded modules for usage.