DEV Community

John Peters
John Peters

Posted on

Shared Modules in Angular

Using Angular Material in your app.module.ts file causes too much clutter. Why not create a shared module which only contains material modules.

From your root type in

ng g m matshared
Enter fullscreen mode Exit fullscreen mode

Then import the Material Modules needed and export them.

import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
  // Leave this blank
  ],
  exports: [
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatIconModule,
    MatMenuModule,
    MatPaginatorModule,
    MatTableModule,
    MatToolbarModule,
    MatTooltipModule,
  ],
})
export class MatSharedModule {}
Enter fullscreen mode Exit fullscreen mode

Now go back to the app.module.

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

import { MatSharedModule } from './matshared.module';
import { NgModule } from '@angular/core';



@NgModule({
  declarations: [AppComponent, MainComponent],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    MatSharedModule,

  ],
  exports: [MatSharedModule,],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

Other feature modules can share this matSharedModule too. Just import and put entry into imports array to use.

import { MatSharedModule } from '../matshared.module';

imports: [
 CommonModule,
 MatSharedModule,   
],
Enter fullscreen mode Exit fullscreen mode

Simple, when we know how.

JWP2021

Discussion (1)

Collapse
jsforlife profile image
jsforlife

Thanks for sharing. just need to get your thoughts

why MatSharedModule is exported from AppModule?