web-dev-qa-db-fra.com

Ngx traduire avec des modules de chargement partagés / paresseux

Probablement l'une des questions les plus courantes, alors que documentation et certaines autres questions j'ai trouvé essayer de clarifier les choses pour moi, mais je ne sais toujours pas comment résoudre ce problème.

Voici donc ma structure:

enter image description here

  • Le module d'application est bien sûr le module principal qui est démarré
  • Module Countryselector: s'occupe du chargement du pays par défaut (basé sur IP) et décide de la langue à utiliser en fonction du navigateur. C'est fondamentalement la fonctionnalité de base pour décider quel pays/langue est utilisé + il contient une liste déroulante pour qu'un utilisateur puisse changer le pays/la langue.
  • Le module de paiement, le module de sélection, le module de paiement sont tous paresseux avec le routage.

AppModule 

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    ContrySelectorModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  export class AppModule { }

CountrySelectorModule 

@NgModule({
  declarations: [CountryselectorComponent],
  imports: [
    CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    CountryselectorComponent
  ]
})
export class ContrySelectorModule { }

Module de sélection: 

@NgModule({
  declarations: [SelectionComponent],
  imports: [
    CommonModule,
    SelectionRoutingModule,
    UspblockModule,
    TranslateModule.forChild({//or forRoot, no idea how to configure this
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }})
  ],
})
export class SelectionModule { }

Maintenant, le problème est que je ne veux pas refaire la configuration de la langue dans les modules paresseux, car le module de sélection de pays s'en occupe déjà. Je ne sais pas maintenant comment configurer correctement les modules chargés paresseux (et en fait je ne sais pas si countrySelectorModule est fait correctement). En utilisant la documentation standard de github je n'ai pas pu retirer ceci. J'ai essayé de jouer avec .forChild() mais pas de chance jusqu'à présent.

Ai-je besoin d'un module de partage? Dois-je importer countrySelectorModule partout (non préféré)? Chargeur personnalisé? t.b.h. Je n'en ai aucune idée et la documentation est un peu courte pour des scénarios plus avancés.

angularlazy-loadingangular7ngx-translate
8
CularBytes

J'ai résolu ce problème en procédant comme suit:

  1. Créez un CoreModule (essentiellement un module partagé), avec le code ci-dessous

CoreModule

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule.forChild({
      loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    },
    isolate: false
}),
  ],
  exports: [TranslateModule],
})
export class CoreModule {

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [ShoppingCartService, AccountService]
    }
  }
}

Cela garantit donc que pour chaque module qui importe CoreModule, TranslateModule utilisera la même configuration. Assurez-vous de l'exporter. La forRoot() a également résolu en s'assurant que ShoppingCartService et AccountService ne sont qu'une seule instance et pas tous les lazy-module créant un service séparé.

  1. Changer AppModule:

AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate : false
    }),
    CoreModule.forRoot(),
    ContrySelectorModule,

  ],
  providers: [    ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Puisque AppModule est votre principal point d'entrée, faites ici la fonction forRoot() pour TranslateModule

  1. Tout module chargé paresseux n'a qu'à importer CoreModule sans aucun appel de méthode. De plus, CountrySelectorModule dans mon exemple doit simplement importer CoreModule et rien d'autre.
13
CularBytes