Separate Module for Angular Material Modules

If you are using Angular Material in your website or app, you can create a separate module for importing all material modules separated from your app.module.ts to avoid getting your code unreadable.
Be aware, that you should only import that modules you are really using in your app, to decrease the build size. At this moment I am not sure if the dead code elimination of webpack recognizes all code. You are welcome to leave a comment if you have any information on that.
On the other hand it keeps your code clean, if you prevent unnecessary imports.

Follow these steps to create an Angular Material Module:

  1. Navigate to src/app/modules/material-ui/
    Create the missing folders if you haven’t already. Of course you can choose another path if you desire.
  2. Create the file material-ui.module.ts and paste in # Snippet 1
  3. Open the file app.module.ts and register your new MaterialModule (# Snippet 2)

# Snippet 1

File: src/app/modules/material-ui/ material-ui.module.ts

typescript

import { NgModule } from '@angular/core';
import {CdkTableModule} from '@angular/cdk/table';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatStepperModule,
} from '@angular/material';

const modules = [
  CdkTableModule,
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatStepperModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
];

@NgModule({
  imports: modules,
  exports: modules,
})
export class MaterialModule {
}

# Snippet 2

File: src/app/ app.module.ts

typescript

import { MaterialModule } from "./modules/material-ui/material-ui.module";

// ...

@NgModule({
  imports: [
    MaterialModule
  ]
})

2 thoughts on “Separate Module for Angular Material Modules

  1. Hi,
    This method nor working with Lazy Load Feature Module..
    You must imports on every single one…

    Or not?

    1. Yes, you have to import this module into every single lazy loaded module, because they are mostly independent from each other. The only exception are services, which are “providedIn: ‘root'”. These services are available to all lazy modules.

Leave a Reply

Your email address will not be published. Required fields are marked *