CODEWITHSUNDEEP
angulararchitecturelazy-loadingangular-material2angular-module
takeshin
takeshin

Reputation: 50638

Lazy loading Angular Material in feature modules

Currently I have MyAngularModule similar to this:

/app/material/material.module.ts

import { MatButtonModule, MatIconModule } from '@angular/material';

const MaterialComponents = [
  MatButtonModule,
  MatIconModule,
...
];

@NgModule({
  imports: [
    MaterialComponents
  ],
  exports: [
    MaterialComponents
  ],
})
export class MyMaterialModule {

}

This is imported once in AppModule now.

Currently I have a "flat" module architecture, all loaded eagerly.

Now I'm changing application architecture to have core, shared and feature s modules (lazy loaded using loadChildren).

eg.

/features/data-grid/data-grid.module.ts

This module will be using some Angular Material components (eg. SpinnerModule), but not all of them.

Other feature modules will be using some other Material components.
Some of the components will be obviously used in many of the feature modules.

The question is: how should I load required material components in feature modules? Shall MyMaterialModule be a submodule of a shared module?

Upvotes: 2

Views: 1850

Answers (1)

chrismclarke
chrismclarke

Reputation: 2105

If you want to only have to define the components once and import everywhere then yes, create a single shared.material.module and import into all lazy-loaded components that require them.

If your goal is to load the minimum possible number of modules you could just import the exact material modules you need into every lazy.module lazy component.

The third option would be to meet somewhere in the middle and have a common core of material modules, core.material.module that you import into all, and import additional as needed if only used by a few components/not very often.

Upvotes: 5

Related Questions