Error: Template parse errors: 'mat-card' is not a known element:

angular angular-material angular5
AppDreamer picture AppDreamer · Nov 9, 2017 · Viewed 33k times · Source

I started an Angular 4 Material project about two months ago with all the current npm installs at that time, and am using most of the components from material.angular.io. since then Angular 5.0.0 has rolled out. I rebuilt by project on the new updates, and the console has the following error.

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

I have checked the install, and believe I have everything current, but code that worked before is failing now. Is this a new requirement of A5, or are the material packages not ready for it?

Answer

Yuri Gridin picture Yuri Gridin · Oct 9, 2018

In Angular 6

app.module.ts:

import { MatCardModule } from '@angular/material';
...
@NgModule({
    declarations: [
    AppComponent,...
],
imports: [
...
MatCardModule,
....
]
...

})

html:

<mat-card>
    <p>
    it works!
    </p>
</mat-card>

Related questions

NullInjectorError: No provider for MatDialogRef

I can't inject MatDialogRef as it described in documentation: https://material.angular.io/components/dialog/overview When i'm trying to do it i'v got error: ERROR Error: StaticInjectorError[MatDialogRef]: StaticInjectorError[MatDialogRef]: NullInjectorError: No provider for MatDialogRef! app.module.ts home.…

Read More
Angular 5 Mat-grid list responsive

i created grid list with column 6 and i want to be grid title take 100% width on small screen devices. Now it creates 6 column on small screens as well Expected: One grid-title occupies 100% of space on mobile device only

Read More
Angular Material mat-datepicker (change) event and format

I am using angular material datepicker directive and I have few problems. 1. When I open date picker dialog and select any date, date shows up in input text box, but I want to call a function when ever any change …

Read More