[英]'mat-card' is not a known element in Angular 7
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 .我在src/app/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:现在,在 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 {}
And there aren't any errors if I use mat-card
in app.component.html
.如果我在app.component.html
使用mat-card
也没有任何错误。 What am I missing here?我在这里缺少什么?
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:需要在与导入 MatCardModule 相同的模块中声明EmployeesComponent,例如:
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.我猜你要么忘记在应用程序模块中声明EmployeesComponent,要么你有另一个模块,可能是Employees 模块,你必须在其中导入MatCardModule。
You can import MatCardModule as您可以导入 MatCardModule 作为
import { MatCardModule } from '@angular/material/card';
ASSUMING: your component is EmployeeAddComponent (already included html (with mat-card, mat-form-field etc))假设:您的组件是 EmployeeAddComponent(已经包含 html(带有 mat-card、mat-form-field 等))
SOLUTION: open app.module.ts解决方案:打开 app.module.ts
first: check import 'area', make sure EmployeeAddComponent is imported.第一:检查导入'area',确保已导入EmployeeAddComponent。 second: check @NgModule at declarations 'area', make sure EmployeeAddComponent is written there.第二:检查@NgModule 声明'area',确保EmployeeAddComponent 写在那里。
At times, error of types "....is not a known element in Angular 7" is also specific to Visual Studio Code.有时,“....is not a known element in Angular 7”类型的错误也特定于 Visual Studio Code。 If you've already tried below steps :如果您已经尝试过以下步骤:
and still getting the above error message in Visual Studio editor, then close the project in editor and re-open.并且仍然在 Visual Studio 编辑器中收到上述错误消息,然后在编辑器中关闭项目并重新打开。
In your app.module.ts
file add below lines:在您的app.module.ts
文件中添加以下app.module.ts
行:
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
schemas: [CUSTOM_ELEMENTS_SCHEMA],
I had the same problem with my Angular project.我的 Angular 项目也遇到了同样的问题。 Once after I installed the material and importing them into the project.在我安装材料并将它们导入项目之后。 I restarted the VSCode.我重新启动了 VSCode。 It solved the issue.它解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.