Jak poprawnie zaimportować moduł Angular Material przez wspólny moduł w Angular 4?

Question

Buduję aplikację przy użyciu Angulara połączonego z materiałem kątowym i mam pewne problemy ze strukturą modułów.

Zgodnie z wytycznymi, importowanie modułu materiałowego jest nieaktualne i nie powinno już być wykonywane, dlatego stworzyłem oddzielny moduł materiałowy, w którym tylko importuję moduły materiałów, których potrzebuję użyć; moduł ten jest następnie importowany do SharedModule, który jest ostatecznie importowany wszędzie tam, gdzie jest potrzebny, w tym główny AppModule.

Jednym z używanych przeze mnie Materiałów jest MdTooltip, i wszystko działa dobrze, z wyjątkiem sytuacji, gdy testuję swoją aplikację na tablecie: co się dzieje, to, że podpowiedzi nie reagują na długie krany, jak na przykład przypuszczam, i nie otworzą się. Jedynym sposobem, w jaki udało mi się to zrobić, jest importowanie pełnego modułu MaterialModule (z @ kątowego/materiału) w moim AppModule, co jest horrendalnie złe i nieeleganckie. Każde inne podejście nie wydawało się, by to przerwać, ponieważ wszystkie one przyniosłyby własne problemy, nie rozwiązując próby.

To są moje moduły (pozbawione zbędnych sprawozdań import):

MaterialModule:

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

jestem doi coś złego? Jak byś podzielił swoją aplikację na submoduły?

góry dzięki

Answer 1

W zależności od kompilacji i strategii wdrażania będziesz chciał użyć drzewa drżenie (dla eliminacji martwego kodu lub kodu żywo importu). Jest to główna motywacja do wycofania MaterialModule. Oficjalna sugestia dotyczy only import the components you need w modułach, które jej potrzebują. Twoje rozwiązanie polegające na utworzeniu pojedynczego MaterialModule ze wszystkimi importami powoduje cofnięcie tego aspektu, ale może działać w zależności od struktury projektu (jeśli na przykład używasz tylko jednego modułu).

Spróbuj usunąć MaterialModule z eksportów SharedModule. W ten sposób masz tylko jeden punkt wejścia dla modułu w katalogu głównym aplikacji.

Answer 2

Twoje podejście jest wspaniałe. Struktura, którą zaprezentowałeś, jest alternatywą, która została zaprezentowana w pliku material.angular.io. Nie jestem pewien, dlaczego twoja podpowiedź nie działa. Ale chciałbym doradzić, aby użyć tylko jednego modułu MaterialModule tylko jeden raz na module głównym. Nie ma potrzeby ponownego importowania go do modułu SharedModule.