Unexpected directive 'MatCard' imported Error With Angular Material 8 --

Question

I am getting the above console error. Trying to work with Angular material latest version, 8.2.3.

I have the following imports line wrt angular material in my app.module.ts --

import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule, MatCard } from '@angular/material';

And imports section --

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    MatCard
  ]

The relevant html portion --

<mat-card class="login-method camera" [hidden]="loginMethod!=='camera'">
                  <mat-card-content>
                    <img [hidden]="!imageUrl" [src]="imageUrl" />
                    <app-camera-snapshot [imageUrl]="imageUrl" (imageCreated)="imageChanged($event)"></app-camera-snapshot>
                  </mat-card-content>
                </mat-card>
                <mat-card class="login-method upload" [hidden]="loginMethod!=='upload'">
                  <mat-card-content>
                    <img [hidden]="!imageUrl" [src]="imageUrl" />
                    <app-image-picker [imageUrl]="imageUrl" (imagePicked)="imageChanged($event)"></app-image-picker>
                  </mat-card-content>
                </mat-card>

To be noted, I tried my code by replacing 'mat' with 'md' also. Just in case. I also tried by using MatCardContent instead of just MatCard import in my app.module.ts. No that did not work either. The complete error message is --

Uncaught Error: Unexpected directive 'MatCard' imported by the module 'AppModule'. Please add a @NgModule annotation.

I am starting to understand why many developers including some of my friends try to avoid angular material! But situations are such, that in my proj. I am bound to utilizing it. Can you tell my simply what's happening here (or not)? There are several github links on the same type of scenario (MatTableDataSource) but none point to a clear approved and accepted answer.

Some help please,

score 1 · Accepted Answer · answered Dec 31 '19 at 15:15

1

Change your import of MatCard to below:

import { MatCardModule } from '@angular/material/card';

Or your existing one:

import { MatCardModule } from '@angular/material';

Both work fine.

answered Dec 31 '19 at 15:15

Sandeep Kumar

2,397
5
30
37

yes, I tried with MatCardModule from '@angular/material' and it does work. The error is gone, Nice and precise. Thanks, @sandeepkumar – Prabir Choudhury Dec 31 '19 at 15:24

score 0 · Answer 2 · answered Dec 31 '19 at 15:17

0

You must change this:

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    MatCardModule //Change this line
  ]

Import the MatCardModule instead of MatCard

answered Dec 31 '19 at 15:17

Juan Daniel Ornella

613
7
13

yes @JuanDanielOrnella I tried that variant one also. Slight typo while posting my question. Sorry for the confusion, – Prabir Choudhury Dec 31 '19 at 15:20

Unexpected directive 'MatCard' imported Error With Angular Material 8 --

2 Answers2