Lazy loading Angular Material in feature modules

Question

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?

chrismclarke · Accepted Answer · 2019-09-02 10:10:20Z

5

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.

edited Sep 2, 2019 at 10:10

answered Sep 2, 2019 at 9:08

chrismclarke

2,11512 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Lazy loading Angular Material in feature modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related