Angular Material with features modules and Angular 6

Question

I'm having troubles using Angular material with Angular 6 whenever I want to use features modules. Here is my project's structure :

app/
|- app.component.ts
|- app.component.html
|- app.module.ts
|- app-routing.module.ts
|- homepage/
  |- homepage.module.ts
  |- homepage-routing.module.ts
  |- pages/
    |- homepage.component.html
    |- homepage.component.ts
    |- homepage.component.css
|- inbox/
  |- inbox.module.ts
  |- inbox-routing.module.ts
  |- pages/
    |- inbox.component.html
    |- inbox.component.ts
    |- inbox.component.css

Both inbox and homepage are lazy loaded. I'm trying to use Angular Material in both homepage.component.html and inbox.component.html (I want to use MatButtonModule) but failing to do so and the official documentation doesn't help me.

Here is what I tried :

• If I try to import MatButtonModule into both homepage.module.ts and inbox.module.ts, the app will crash with this error Uncaught (in promise): TypeError: Cannot read property 'call' of undefined.
• If I try to import MatButtonModule into only one module, it will work only for the component binding to this module.
• If I try to import MatButtonModule directly into app.module.ts it just won't work at all.

So my question is, how can I use Angular Material with features modules, what is the best practices?

Answer 1

I suggest you to make another module and name it MaterialModule and place it in the root of your application , then export all material modules which you want to use in you'r app i.e MatButtonModule like below

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';

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

And then import MaterialModule into both modules ( inbox.module.ts and homepage.module.ts )

If this solution won't work , add you'r code into stackblitz so I can check exactly what is you'r code's problem.

Good luck