CODEWITHSUNDEEP
angularangular11
Daniel
Daniel

Reputation: 15483

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.

Upvotes: 0

Views: 1529

Answers (2)

Patrick Gilmartin
Patrick Gilmartin

Reputation: 1

I found that when I first set up Angular Material I put the module in declarations and not imports, which can cause this problem. I ran build and it threw the error, I looked over the code and saw the mistake. Once I moved the module to the imports everything worked.

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 58637

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.

Upvotes: 1

Related Questions