ng2-translate in CoreModule

Question

In our Angular App we have Feature Modules as well as Core and Shared Module as described by the Angular - linkStyle Structure best practices.

We use ng2-translate and as per doc, we should call forRoot() in App Module (root module).

This is how our App Module looks like:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FeatureAModule,
    FeatureBModule,
    CoreModule,
    TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

As we want to translate our menu and it's part of the Core Module we had to import the Translate Module there, like so:

@NgModule({
  imports: [
    TranslateModule
  ],
  exports: [
      FormsModule,
      MenuComponent,
      BreadcrumbComponent
  ],
  declarations: [MenuComponent, BreadcrumbComponent]
})
export class CoreModule {
    constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
      throwIfAlreadyLoaded(parentModule, "CoreModule");
    }
 }

Does this make sense? Should I remove TranslateModule.forRoot(...) from the App Module and place it in the imports of the Core Module ? Is that wrong?

This is the correct method. Items needing to be compiled into the root module need to stay in the App Module for standard AngularCLI builds. — Z. Bagley, Jun 24 '17 at 15:47
What about the question of the Core Module? Why should I duplicate it in the Core Module? — DAG, Jun 24 '17 at 15:50
Even though it's compiled into the app root your core module needs some way of knowing that it will be using your TranslateModule. TranslateModule will be compiled into your app root and all other module that import it will use this one instance of it. — Z. Bagley, Jun 24 '17 at 15:52
Ok, as per doc from ng2-translate, Shared Module for instance should only export it and not import it. Is it because Core Module is an eagerly loaded module? — DAG, Jun 24 '17 at 15:57
Because the CoreModule is use statically within your AppModule it will need the import. Since SharedModule is imported into other modules/components it will need to export. Remember App root is holding onto your ng2-translate, and since it is already available you want to make sure anything that uses it knows where it's available. Core doesn't use shared, so you need to import directly. Other modules will use shared, so shared will export the location to other modules. — Z. Bagley, Jun 24 '17 at 16:03

BeetleJuice · Accepted Answer · 2017-06-24T16:15:27.373

If you're following the docs, then AppModule will be the only one to import CoreModule. If that's the case, things would work just fine if you simply add TranslateModule.forRoot() to CoreModule.imports array and TranslateModule to CoreModule.exports array. Then in your AppModule, all you need to do is import the CoreModule without having to deal with the translate module again.

This is similar to how the docs suggest integrating the RouterModule for instance. Take a look at this. Notice that RouterModule.forRoot() is imported in AppRoutingModule, but not in AppModule itself. So in your place I would have:

CoreModule

// forRoot is OK here because AppModule is the only one to import CoreModule
imports: [TranslateModule.forRoot(...)]

// will make Translate available to AppModule
exports: [TranslateModule]

AppModule

//importing Core will import Translate and its services provided by .forRoot()
imports: [CoreModule]

SharedModule

//only if the components, directives and pipes of SharedModule need Translate
imports: [TranslateModule]

//so that all modules that import SharedModule will have Translate access
exports: [TranslateModule]

Thanks, that is just the approach I was using, but I was not sure if this was the correct approach. — DAG, Jun 24 '17 at 16:40
The TranslateModule MUST go to the root module (AppModule) only, not in any other sub-modules, otherwise the Loader implementation doesn't trigger. See official doc: https://github.com/ngx-translate/core#1-import-the-translatemodule — Davideas, May 07 '23 at 12:24

ng2-translate in CoreModule

1 Answers1