In angular, why do i have to import Material-modules separately for different custom modules?

844    Asked by SophieLyman in Python , Asked on Jan 27, 2020
Answered by Sophie Lyman

It actually isn't because they are lazy loaded. A module only has access to the components which are defined in its declaration, or in the declarations of other modules it imports. So if you eagerly load your feature module into the AppModule, the feature module won’t get access to the declarations of the AppModule.

There really isn't a way around this, its good design I think to be explicit about what a module has access to. One thing you can do though, if there is a common set of Material modules you want to import all over the place, is make a SharedMaterialModule:

@NgModule({

  import: [

     MatButtonModule,

     MatInputModule

  export: [

 ],

     MatButtonModule,

     MatInputModule

  ]

})

export class SharedMaterialModule {

}

You can then just import the SharedMaterialModule, and not have to import the MatButtonModule and any others that you want to have access too widely. Note though: if you add too much stuff here that isn't genuinely used everywhere, you can just end up making your feature modules have a bigger download footprint with stuff they aren't really using.



Your Answer

Interviews

Parent Categories