Sharing angular material module in whole project

Question

I had import all the angular material module in my app.module

@NgModule({imports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatIconModule,
MatInputModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule],})
export class AppModule {}

Now my program will redirect to either login page or layout page. The code is shown at below:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AuthGuard} from './shared/guard/auth.guard';

const routes: Routes = [
   {path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]},
   {path: 'login', loadChildren: './login/login.module#LoginModule'}];

@NgModule({
   imports: [RouterModule.forRoot(routes, {useHash: true})],
   exports: [RouterModule]
})
export class AppRoutingModule {}

How can I use all the angular material from here instead of import all the material again in Login.module and Layout.module

I had done it with compoent: LoginComponent and I work but how can I do it in loadChildren?

Answer 1

Angular NgModule-s declarations are only applicable to the current components. Means if you have imported MaterialModule in the AppModule, only components that are added in the declarations of the AppModule can use elements from the MaterialModule. You can create a custom MaterialModule, import all declarations into it and export them from that module. Then in the project you can use this custom module in each module you want to use.

What about the bundle size, tree shaking will just throw away those declarations that are not used by that module.

NgModule({
   imports: [...here goes material modules],
   exports: [...here goes material modules]
})
export class CustomMaterialModule

...

NgModule({
   imports: [CustomMaterialModule]
})
export class YourModule {  }