Angular material theme not applied in child module after creating Material Module and importing it into app.module

Question

As suggested in many other tutorials, I've decided to declutter my app.module from specific angular material modules and have created a separate module called 'material module' -- then I have imported this module directly into the app.module's imports array.

Now if I have a material button in app.component.html all is good and themeing is applied.

However, I have an Auth Module which is being displayed via the and any angular themeing does not get applied in that module, they're all basic html elements.

I'm sure I'm missing something really obvious about how modules are supposed to work in angular but after reading a lot of threads here and some forums via google search + documentation, I can't figure out what it is that I'm missing.

Do you need to import your materialmodule into the authmodule? — Darren Lamb
That seems to work, but then don't I endup not having a singleton core material module? — SebastianG
It's still a "singleton." You've only defined it in one place, and all of your code for it is in that once place. But you still have to import it's module into any dependent modules or components. Otherwise, angular has no way of knowing that it should apply to the dependent module. — Rich
I understand, so this is the desired/designed/proper way of doing it? Create a module like that and import it everywhere? All the google searches about this were talking about the providers array and how not to use services in shared modules or if you do have to use services just use the .forRoot configuration; — SebastianG
In Angular a module acts as compilation context, if you don't import the MaterialModule into the AuthModule then the material objects are outside of the context and angular doesnt know anything about them. Yes, this is an accepted way of sharing code. The .forRoot method is used for services, what you're discussing are the angular components (ng-button, etc...). See the angular docs on sharing modules here angular.io/guide/sharing-ngmodules — Darren Lamb

Darren Lamb Darren Lamb · Accepted Answer · 2019-03-13T15:49:07

The problem here is not with the theme but the AuthModule not knowing how to resolve the material components.

In Angular a module acts as compilation context, if you don't import the MaterialModule into the AuthModule then the material components are outside of the context and angular doesnt know anything about them.

Importing your MaterialModule into your AuthModule will resolve this issue, for example:

material.module.ts:

@NgModule({
  imports: [MatButtonModule, MatListModule],
  exports: [MatButtonModule, MatListModule],
})
export class MaterialModule {}

auth.module.ts

@NgModule({
  imports: [CommonModule, MaterialModule],
  providers: ...,
})
export class AuthModule {}

Note that

MaterialModule exports MatButtonModule
AuthModule imports MaterialModule Therefore, AuthModule has access to the Components defined in MatButtonModule

For more information on this see the angular docs https://angular.io/guide/sharing-ngmodules

Angular material theme not applied in child module after creating Material Module and importing it into app.module

2 Answers