title: How to correctly import the Angular Material module through a shared module in Angular 4?
body: <p>I'm building an application using Angular paired with Angular Material, and I'm having some issues with my modules structure.</p>
  
  <p>As the guidelines suggest, importing the MaterialModule is deprecated and should no longer be done, which is why I've made a separate MaterialModule where I only import the Material modules I need to use; this module is then imported in a SharedModule, which is eventually imported everywhere it's needed, including the main AppModule.</p>
  
  <p>One of the Material components I'm using is the MdTooltip, and it all works fine except for when I test my app on a tablet: what happens is that the tooltips don't react to long taps like they're supposed to, and they won't open. The only way I've managed to make it work is by importing the full MaterialModule (from @angular/material) in my AppModule, which is horrendously wrong and inelegant. Any other approach didn't quite seem to cut it, as they would all bring their own problems while not solving the ordeal.</p>
  
  <p>These are my modules (stripped of redundant import statements):</p>
  
  <p>MaterialModule:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import {...} from '@angular/material';
  
  @NgModule({
    imports: [
      MdGridListModule,
      MdButtonModule,
      MdTabsModule,
      MdToolbarModule,
      MdCardModule,
      MdInputModule,
      MdSelectModule,
      MdAutocompleteModule,
      MdIconModule,
      MdTooltipModule
    ],
    exports: [
      MdGridListModule,
      MdButtonModule,
      MdTabsModule,
      MdToolbarModule,
      MdCardModule,
      MdInputModule,
      MdSelectModule,
      MdAutocompleteModule,
      MdIconModule,
      MdTooltipModule
    ],
    providers: [
      MdIconRegistry
    ]
  })
  
  export class MaterialModule {}
  </code></pre>
  
  <p>SharedModule:</p>
  
  <pre><code>import { MaterialModule } from '../material/app-material.module';
  @NgModule({
    imports:      [
      CommonModule,
      MaterialModule,
      FlexLayoutModule,
      FormsModule,
      ReactiveFormsModule
    ],
    declarations: [
      NavbarComponent,
      SearchFiltersComponent,
      RightCurrencyPipe
    ],
    exports:      [
      CommonModule,
      FormsModule,
      ReactiveFormsModule,
      MaterialModule,
      FlexLayoutModule,
      NavbarComponent,
      RightCurrencyPipe,
      SearchFiltersComponent
    ],
    providers: [
      SpinnerService,
      ProductsService,
      StatePersistenceService
    ]
  })
  
  export class SharedModule {}
  </code></pre>
  
  <p>AppModule:</p>
  
  <pre><code>import { MaterialModule } from "@angular/material";
  @NgModule({
    declarations: [
      AppComponent,
      ProductPageComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      RouterModule,
      BrowserAnimationsModule,
      AppRoutingModule,
      SharedModule,
      CoreModule,
      LoginModule,
      MaterialModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Am I doing something wrong? How would you go about dividing your app into submodules?</p>
  
  <p>Thanks in advance</p>