43

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?

Woody
  • 1,677
  • 7
  • 26
  • 32

6 Answers6

78

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';
Husain Ali
  • 155
  • 1
  • 9
SnorreDan
  • 2,740
  • 1
  • 14
  • 17
  • Thanks. I had EmployeesComponent in app-routing.module.ts. I've made some changes and all is working as expected now. – Woody Mar 24 '19 at 06:34
  • This sentence was the key for me, "The EmployeesComponent need to be declared in the same module as where you import the MatCardModule...". Thanks for the help. We have too many modules and it is more confusing than helpful. – Don Rolling May 04 '22 at 14:25
3

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.

Varkery
  • 190
  • 1
  • 5
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.

Devesh G
  • 109
  • 10
3

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

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


schemas: [CUSTOM_ELEMENTS_SCHEMA],
Trupti
  • 31
  • 3
0

You need to import you component on the app.module declarations. it should fix it

Eddie R
  • 1
-1

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.

mohamed sajith
  • 21
  • 5