I have an Angular project in which I'm trying to use the Angular Material library. In my app-routing.module I have this code:

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

In SndComingSoonPageComponent I'm trying to use MatIconModule but no matter where I import it, I'm still not able to use it.

This is my 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 {}

This is my 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 {}

This is my 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 {}

and this is the 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 {}

I don't understand. Where should I import MatIconModule so that my comingSoonPageComponent is able to use it? Actually, how can I determine which page is using which module?

CodePudding user response：

You have to import material modules where you declared component that used that material design feature.

In your case it is SndComingSoonPageComponent.

serach for the module that you declared SndComingSoonPageComponent in and import MatIconModule in that module.

example:

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

CodePudding user response：

you have to import MaticonModule in APP module

import {MatIconModule} from '@angular/material/icon';

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