How to correctly import the Angular Material module through a shared module in Angular 4?

Question

I\'m building an application using Angular paired with Angular Material, and I\'m having some issues with my modules structure.

As the guidelines suggest, importing

Answer 1

Depending on your compiling and deployment strategy you'll want to use tree shaking (for dead-code elimination or live-code import). This is the main motivation for MaterialModule being deprecated. The official suggestion is to only import the components you need in the modules that need it. Your solution of creating a single MaterialModule with all the imports is undoing that aspect but might work depending on your project structure (if you're only using a single module for example).

Try removing MaterialModule from your SharedModule exports. That way you only have a single point of entry for the module in your app root.

Answer 2

1. create a shared module in "src\app" using: ng g module shared

2. import all the needed material modules in the shared module. important!!! sometimes you get an error if you tried to import set of modules together. you should import them one by one like here below=>

   import { MatButtonModule } from '@angular/material/button';

   import {MatFormFieldModule} from '@angular/material/form-field';

   import {MatInputModule} from '@angular/material/input';

then

    @NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule
  ],
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule

  ]
})

now you are able to import this shared module wherever you need one or more of the material modules you imported in shared module . for example if you need angular material in the student example =>

import {SharedModule} from '../shared/shared.module'

and then

@NgModule({
  declarations: [
    TdFormComponent],
  imports: [
    CommonModule,
    SharedModule,
    
  ]
})

Answer 3

Your approach is great. The structure that you have presented is an alternative that was presented in material.angular.io. I am unsure to why your tooltip does not work. But I would like to advise you to only use your custom MaterialModule only once on the root module. There is no need to import it in the SharedModule again.

Answer 4

Your first mistake is services in SharedModule. SharedModule should not have Providers array. CoreModule is used for services.

You don't need to import all stuff in shared module. SharedModule is for exports usually. Also MaterialModule does not need imports because it does not use them. Its purpose is export.

If NavBarComponent is used app wide so it should be in CoreModule. Not in SharedModule.

If you do not have to, don't import SharedModule into AppModule. SharedModule is for FeaturedModules.

Read Offical Docs: https://angular.io/guide/ngmodule-faq#what-kinds-of-modules-should-i-have-and-how-should-i-use-them