web-dev-qa-db-fra.com

Comment importer correctement le Angular Module de matériaux via un module partagé dans Angular 4?

Je construis une application en utilisant Angular couplé avec Angular Material et je rencontre des problèmes avec la structure de mes modules.

Comme le suggèrent les instructions, l'importation de MaterialModule est obsolète et ne devrait plus être utilisée. C'est pourquoi j'ai créé un MaterialModule séparé dans lequel je ne fais qu'importer les modules de matériel que je dois utiliser. ce module est ensuite importé dans un SharedModule, qui est finalement importé partout où il est nécessaire, y compris le principal AppModule.

L'un des composants matériels que j'utilise est l'outil MdTooltip, et tout fonctionne correctement, sauf lorsque je teste mon application sur une tablette: les info-bulles ne réagissent pas aux longues pressions comme elles sont supposées l'être, et ils n'ouvriront pas. Le seul moyen pour que cela fonctionne est d'importer le MaterialModule (de @ angular/material) complet dans mon AppModule, ce qui est terriblement faux et inélégant. Toute autre approche ne semblait pas vraiment la réduire, car tous apportaient leurs propres problèmes sans résoudre l'épreuve.

Voici mes modules (débarrassés des instructions d'importation redondantes):

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

Est-ce que je fais quelque chose de mal? Comment voulez-vous diviser votre application en sous-modules?

Merci d'avance

angulartypescriptangular-material2
6
Samuele

Votre approche est géniale. La structure que vous avez présentée est une alternative présentée dans material.angular.io. Je ne suis pas sûr de savoir pourquoi votre info-bulle ne fonctionne pas. Mais je vous conseille de n'utiliser votre MaterialModule personnalisé qu'une seule fois sur le module racine. Il n'est pas nécessaire de l'importer à nouveau dans le SharedModule.

1
alaboudi

En fonction de votre stratégie de compilation et de déploiement, vous souhaiterez utiliser l’arborescence (pour l’élimination du code mort ou l’importation en direct). C’est la principale motivation pour que MaterialModule soit déconseillé. La suggestion officielle est de importer uniquement les composants nécessaires dans les modules qui en ont besoin. Votre solution consistant à créer une seule variable MaterialModule avec toutes les importations annule cet aspect, mais pourrait fonctionner en fonction de la structure de votre projet (si vous n'utilisez qu'un seul module, par exemple).

Essayez de supprimer MaterialModule de vos exportations SharedModule. De cette façon, vous n’avez qu’un seul point d’entrée pour le module dans la racine de votre application.

0
Raven