[英]'mat-card' is not a known element in Angular 7
我已經看到很多關於此的問題,但似乎與我遇到的問題不同。 我剛剛創建了我的第二個角度項目。 我在src/app/employees
下有一個新組件,我試圖在員工.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 {}
如果我在app.component.html
使用mat-card
也沒有任何錯誤。 我在這里缺少什么?
我在您的聲明列表中看不到您的員工組件。 需要在與導入 MatCardModule 相同的模塊中聲明EmployeesComponent,例如:
declarations: [
EmployeesComponent
],
imports: [
MatCardModule
]
我猜你要么忘記在應用程序模塊中聲明EmployeesComponent,要么你有另一個模塊,可能是Employees 模塊,你必須在其中導入MatCardModule。
您可以導入 MatCardModule 作為
import { MatCardModule } from '@angular/material/card';
假設:您的組件是 EmployeeAddComponent(已經包含 html(帶有 mat-card、mat-form-field 等))
解決方案:打開 app.module.ts
第一:檢查導入'area',確保已導入EmployeeAddComponent。 第二:檢查@NgModule 聲明'area',確保EmployeeAddComponent 寫在那里。
有時,“....is not a known element in Angular 7”類型的錯誤也特定於 Visual Studio Code。 如果您已經嘗試過以下步驟:
並且仍然在 Visual Studio 編輯器中收到上述錯誤消息,然后在編輯器中關閉項目並重新打開。
在您的app.module.ts
文件中添加以下app.module.ts
行:
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
schemas: [CUSTOM_ELEMENTS_SCHEMA],
我的 Angular 項目也遇到了同樣的問題。 在我安裝材料並將它們導入項目之后。 我重新啟動了 VSCode。 它解決了這個問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.