CODEWITHSUNDEEP
angularangular-materialangular5
AppDreamer
AppDreamer

Reputation: 1426

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?

Upvotes: 14

Views: 54062

Answers (4)

Yuri Gridin
Yuri Gridin

Reputation: 469

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>

Upvotes: 16

AppDreamer
AppDreamer

Reputation: 1426

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.

Upvotes: 5

AppDreamer
AppDreamer

Reputation: 1426

I ended up starting a new app...

npm cache clean -f
npm install -g n
ng new myAppName

Then I copied my components one at a time into the components folder. With each copy, i ran ng serve, and fixed each problem (such as adding imports to the app.module.ts file and the like). I only installed npm components when they were needed by current good code.

npm install myComponent --save

As I went along, I found a few outdated md-elements (such as md-card) and converted them to their mat-element version. Interestingly, apparently in Angular 4, they supported both mat and md versions of the same components, but in 5 they seem to have deprecated some.

It was a long afternoon, but it helped me weed out all the npm modules that I tried and abandoned, and now everything cooks.

Upvotes: 0

Edric
Edric

Reputation: 26730

Can you try importing MatCardModule from its separate entrypoint (aka @angular/material/card)? That worked for me.

If you don't supply any code, I can't really help you otherwise.

Upvotes: 3

Related Questions