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

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,
    
  ]
})