Question

我已经看到很多关于此的问题，但似乎不是我遇到的相同问题。我刚刚创建了我的第二个角度项目。我在src/app/employees下有一个新组件，试图在employee.component.html中使用。我得到的错误是：

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>

现在，在app.module.ts中，我有：

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 {}

如果我在mat-card中使用app.component.html，则不会有任何错误。我在这里想念什么？

Answer 1

在声明列表中看不到您的EmployeesComponent。需要在与导入MatCardModule的模块相同的模块中声明EmployeesComponent，例如：

declarations: [
    EmployeesComponent
],
imports: [
    MatCardModule
]

我猜想是您忘记了在应用程序模块中声明EmployeesComponent，还是您有另一个模块（可能是Employees模块），必须在其中导入MatCardModule。

Answer 2

有时，“....is not a known element in Angular 7”类型的错误也特定于 Visual Studio Code。如果您已经尝试过以下步骤：

npm install --save @angular/material
ng 添加@angular/material

在 Visual Studio 编辑器中仍然收到上述错误消息，然后在编辑器中关闭项目并重新打开。

Answer 3

假设：您的组件是EmployeeAddComponent（已经包含html（带有mat-card，mat-form-field等））

解决方案：打开app.module.ts

首先：检查导入“区域”，确保已导入EmployeeAddComponent。第二：在声明“ area”处检查@NgModule，确保在其中写入EmployeeAddComponent。

Answer 4

我的 Angular 项目也遇到了同样的问题。在我安装材料并将它们导入项目之后。我重新启动了 VSCode。它解决了这个问题。

在Angular 7中'mat-card'不是已知的元素

4 个答案: