'mat-card' is not a known element in Angular 7

Question

I've seen a lot of questions on this but doesn't seem to be the same issue Im encountering. I have just created my 2nd angular project. I have a new component under src/app/employees where I am trying to use in employees.component.html . The error I am getting is:

Uncaught 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. ("[ERROR ->]<mat-card> </mat-card>

Now, in app.module.ts I have:

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { LOCALE_ID, NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {
  MatButtonModule,
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatSelectModule,
  MatSidenavModule,
  MatCardModule,
  MatTableModule
} from "@angular/material";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatListModule,
    MatInputModule,
    MatSelectModule,
    MatSidenavModule,
    MatCardModule,
    MatTableModule
  ],....
})
export class AppModule {}

And there aren't any errors if I use mat-card in app.component.html . What am I missing here?

Answer 1

I can not see your EmployeesComponent in your list of declarations. The EmployeesComponent need to be declared in the same module as where you import the MatCardModule, like:

declarations: [
    EmployeesComponent
],
imports: [
    MatCardModule
]

I am guessing either that you have forgotten to declare the EmployeesComponent in your app module, or that you have another module, perhaps Employees module, where you have to import the MatCardModule.

You can import MatCardModule as

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

Answer 2

ASSUMING: your component is EmployeeAddComponent (already included html (with mat-card, mat-form-field etc))

SOLUTION: open app.module.ts

first: check import 'area', make sure EmployeeAddComponent is imported. second: check @NgModule at declarations 'area', make sure EmployeeAddComponent is written there.

Answer 3

At times, error of types "....is not a known element in Angular 7" is also specific to Visual Studio Code. If you've already tried below steps :

1. npm install --save @angular/material
2. ng add @angular/material

and still getting the above error message in Visual Studio editor, then close the project in editor and re-open.

Answer 4

In your app.module.ts file add below lines:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';


schemas: [CUSTOM_ELEMENTS_SCHEMA],

Answer 5

I had the same problem with my Angular project. Once after I installed the material and importing them into the project. I restarted the VSCode. It solved the issue.