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?

Answer 1

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]