修复“mat-icon”不是已知元素错误

Question

我有一个 Angular 项目，我试图在其中使用 Angular 材质库。在我的app-routing.module我有这样的代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SndComingSoonPageComponent } from './feature/pages/snd-coming-soon-page/snd-coming-soon-page.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', component: SndComingSoonPageComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

我正在SndComingSoonPageComponent尝试使用MatIconModule，但无论我在哪里导入它，我仍然无法使用它。

这是我的app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CoreModule } from '@core/core.module';
import { WidgetModule } from '@widget/widget.module';
import { FeatureModule } from '@feature/feature.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CoreModule,
    FeatureModule,
    WidgetModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

这是我的core.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    HttpClientModule,
  ],
})
export class CoreModule {}

这是我的feature.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetModule } from '@widget/widget.module';
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';

@NgModule({
  imports: [
    CommonModule,
    WidgetModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatDividerModule,
  ],
  declarations: [],
})
export class FeatureModule {}

这是widget.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatProgressBarModule,
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatDividerModule,
  ],
  exports: [],
})
export class WidgetModule {}

我不明白。我应该在哪里导入MatIconModule以便我的comingSoonPageComponent 能够使用它？实际上，我如何确定哪个页面正在使用哪个模块？

Answer 1

您必须导入声明使用该材料设计功能的组件的材料模块。

就你而言，是的SndComingSoonPageComponent。

搜索您在该模块中声明SndComingSoonPageComponent并导入的模块MatIconModule。

例子：

import {SndComingSoonPageComponent} from '.......';

@NgModule({
  declarations: [
    AppComponent,
    SndComingSoonPageComponent       \\ component which uses module
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    CoreModule,
    MatIconModule                    \\ module 
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}