我两个月前开始使用 Angular,我设计了一个应用程序并进行了 ng 测试,我遇到了这个错误:
失败:模板解析错误: “mat-card-title”不是已知元素: 1. 如果“mat-card-title”是 Angular 组件,则验证它是否是该模块的一部分。 2. 如果“mat-card-title”是 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@ NgModule.schemas”以抑制此消息。 我不明白什么在我的代码中不起作用。
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeroService } from './hero.service';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularMaterialModule } from './angular-material/angular-material.module';
import { environment } from 'src/environments/environment';
import { FormsModule } from '@angular/forms';
import { ToastrModule } from 'ngx-toastr';
import { HeroesListComponent } from './heroes-list/heroes-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroSearchComponent } from './hero-search/hero-search.component';
import { HeroTableComponent } from './hero-table/hero-table.component';
import { LoginComponent } from './login/login.component';
import { NavbarHeroesComponent } from './navbar-heroes/navbar-heroes.component';
import { AddHeroesComponent } from './add-heroes/add-heroes.component';
import { HeroGridComponent } from './hero-grid/hero-grid.component';
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
AngularFireModule.initializeApp( environment.firebaseConfig ),
AngularFirestoreModule,
FlexLayoutModule,
AngularFireAuthModule,
AngularFireStorageModule,
ToastrModule.forRoot(),
AngularMaterialModule
],
providers: [
HeroService
],
bootstrap: [AppComponent]
})
export class AppModule { }
这是 AngularMaterialModule
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatButtonModule,
MatTableModule,
MatIconModule,
MatFormFieldModule,
MatSelectModule,
MatInputModule,
MatRadioModule,
MatToolbarModule,
MatCardModule,
MatGridListModule,
MatCheckboxModule,
} from '@angular/material';
const moduleAngularMaterial = [
MatButtonModule,
MatIconModule,
MatFormFieldModule,
MatSelectModule,
MatInputModule,
MatTableModule,
MatCheckboxModule,
MatRadioModule,
MatToolbarModule,
MatCardModule,
MatGridListModule
];
@NgModule({
declarations: [
],
imports: [
moduleAngularMaterial,
CommonModule
],
exports: [
moduleAngularMaterial
],
})
export class AngularMaterialModule { }
最佳答案
当组件模块是以下任一情况时,就会出现此类问题:
- 未导入到声明和打算使用的模块中
- 不会从声明使用 Angular 组件的组件的 SharedModule 重新导出。
根据您的项目场景,可以:
- 将 mat 组件模块导入到声明和打算使用的同一模块中,或者
- 从 [YourCustom]Module 重新导出 mat ui 组件模块,该模块会导入 Angular 的 mat Ui 模块。
关于angular - 失败: Template parse errors: 'mat-card-title' is not a known element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58933440/