Q:

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

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?

A:

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>

A:

Wow! I ran into this issue again, and really dug in to figure it out. If you follow certain documentation for things like the Material Side-Nav module, you may be led to split your @NgModule declaration in app.module.ts to separate exports from the rest like so...
@NgModule({
   exports: [
      myModule,
      anotherModule
   ],
})
export class MaterialModule {}

@NgModule({
   imports: [
      ... all the rest of your stuff]
   declarations: [
      ... all your custom Components
})
export class AppModule {}

In this case, after you split them, when you later add more custom Components using...
ng g component components/myNewModule

It may put a new, additional "declarations:" under the other @NgModule section, thus breaking access to things like mat-cards to those components! Simply move the newly added declarations down to the others and the problem goes away.
I tested this twice and it seems to fix the problem if you get the Error: Template parse errors: 'mat-card' is not a known element above.

