Как правильно импортировать модуль Angular Material через общий модуль в Angular 4?

Я создаю приложение, используя Angular в сочетании с Angular Material, и у меня возникают некоторые проблемы со структурой моих модулей.

Как указано в руководстве, импорт MaterialModule устарел и больше не должен выполняться, поэтому я создал отдельный MaterialModule, в котором я импортирую только те модули материалов, которые мне нужны; затем этот модуль импортируется в SharedModule, который в конечном итоге импортируется везде, где это необходимо, включая основной модуль AppModule.

Одним из компонентов материала, который я использую, является MdTooltip, и все он отлично работает, за исключением случаев, когда я тестирую свое приложение на планшете: происходит то, что всплывающие подсказки не реагируют на длинные нажатия, как должны, и они не открываются. Единственный способ заставить его работать - это импортировать полный MaterialModule (из @ angular / material) в мой AppModule, что ужасно неправильно и неэлегантно. Любой другой подход, похоже, не помогал, поскольку все они приносили свои проблемы, но не решали испытания.

Это мои модули (без лишних операторов импорта):

МатериалМодуль:

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 {}

SharedModule:

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 {}

AppModule:

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 { }

Я делаю что-то неправильно? Как бы вы разделили свое приложение на подмодули?

заранее спасибо