Pesquisa de site

angular - Corrigir erro 'mat-icon' não é um elemento conhecido

Eu tenho um projeto Angular no qual estou tentando usar a biblioteca Angular Material. No meu app-routing.module eu tenho este código:

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 {}

No SndComingSoonPageComponent estou tentando usar MatIconModule, mas não importa onde eu o importe, ainda não consigo usá-lo.

Este é o meu 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 {}

Este é o meu 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 {}

Este é o meu 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 {}

e este é o 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 {}

Eu não entendo. Onde devo importar MatIconModule para que meu comingSoonPageComponent possa usá-lo? Na verdade, como posso determinar qual página está usando qual módulo?

Resposta #1

Você precisa importar os módulos do Material onde você declarou o componente que usou aquele recurso do Material Design.

No seu caso, é SndComingSoonPageComponent.

procure pelo módulo que você declarou SndComingSoonPageComponent e importe MatIconModule

exemplo :

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 {
}

Resposta #2

Eu tive o mesmo erro algumas vezes. Para entender esse erro, você precisa entender como os NgModules do Angular funcionam.

Um exemplo,

Se você comparar seu projeto Angular a uma árvore, então o app.module.ts é o tronco principal e o resto do seu módulo são ramos desse tronco. Você poderia dizer que os componentes e serviços são como folhas.

Então, voltando ao seu problema. Quando você cria um projeto com o recurso de carregamento preguiçoso, o projeto Angular começa a compilar seu projeto a partir da raiz, que é o módulo raiz do seu projeto (app.module.ts).

Ele reúne todas as importações a serem usadas no projeto a partir do diretório de importação do @NgModule no seu app.module.ts.

Para carregar ainda mais o outro módulo, o Angular depende do NgModule desse módulo específico.

Então, a resposta curta é que você deve importar o módulo correto no seu app.routing-module.ts. (Pois às vezes, devido à implementação automática, você deve ter importado o routing-module em vez do module)

Artigos relacionados