Fix 'mat-icon' is not a known element error

Question

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?

Answer 1

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

Answer 2

I have the same error for couple of time. To understand this error you have to understand the way angular NgModules work.

An example,

If you compare your angular project to a tree, then the app.module.ts is the main trunk and the rest of your module is branches of that trunk. You could say that the components and services are like leaves.

So coming back to your problem. When you create a project with the lazy loading feature, the angular project start compiling your project from the root, which is the root module of your project (app.module.ts).

It gathers all the imports to be used in the project from the import directory of the @NgModule in your app.module.ts.

To further load the other module, Angular relies on the NgModule of that particular module.

So the short answer is you should import the correct module in your app.routing-module.ts. (As sometimes due to auto-implementation you must have imported the routing-module instead of module)