angular - แก้ไขข้อผิดพลาด 'mat-icon' ไม่ใช่องค์ประกอบที่รู้จัก

ฉันมีโครงการ Angular ที่ฉันพยายามจะใช้ไลบรารี Angular Material ใน 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 ที่ไหนเพื่อให้ component comingSoonPageComponent ของฉันสามารถใช้มันได้? จริงๆ แล้ว ฉันจะทราบได้อย่างไรว่าหน้าไหนกำลังใช้โมดูลไหน?

คำตอบ #1

คุณต้องนำเข้ามอดูลของ Material ที่คุณประกาศคอมโพเนนต์ซึ่งใช้ฟีเจอร์ของ Material Design นั้น

ในกรณีของคุณมันคือ 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 {
}

คำตอบ #2

ฉันมีข้อผิดพลาดเดียวกันหลายครั้ง ในการเข้าใจข้อผิดพลาดนี้คุณต้องเข้าใจวิธีการทำงานของ Angular NgModules

ตัวอย่าง,

ถ้าคุณเปรียบเทียบโปรเจกต์ Angular ของคุณกับต้นไม้ app.module.ts คือแกนหลักของต้นไม้ และโมดูลอื่น ๆ ของคุณคือกิ่งของแกนนั้น คุณอาจพูดได้ว่าคอมโพเนนต์และเซอร์วิสเปรียบเหมือนใบไม้

ดังนั้นกลับมาที่ปัญหาของคุณ เมื่อคุณสร้างโปรเจกต์ที่มีฟีเจอร์การโหลดแบบ Lazy Loading โปรเจกต์ Angular จะเริ่มคอมไพล์โปรเจกต์ของคุณจากราก ซึ่งก็คือโมดูลรากของโปรเจกต์ของคุณ (app.module.ts)

มันรวบรวมการนำเข้าทั้งหมดที่จะใช้ในโครงการจากไดเร็กทอรีการนำเข้าของ @NgModule ในไฟล์ app.module.ts ของคุณ

ในการโหลดโมดูลอื่นเพิ่มเติม Angular จะพึ่งพา NgModule ของโมดูลนั้นโดยเฉพาะ

ดังนั้นคำตอบสั้น ๆ คือคุณควรนำเข้ามอดูลที่ถูกต้องในไฟล์ app.routing-module.ts ของคุณ (เนื่องจากบางครั้งจากการใช้งานอัตโนมัติคุณอาจได้นำเข้า routing-module แทนที่จะเป็น module)