Loading bundles for a new feature module

To support localization and internationalization, load the translation bundles JSON for a module. The configuration code for loading translation bundles and setting the language is auto-generated when the module is created by the following command:

yarn new-extension-feature

Procedure

The feature specific translation bundles and common bundles that are used by the core and common components library is loaded in the application root module of the single-spa angular application. The language to be used by the translation service is set in the constructor.

Note: The following sample code is only for your understanding. Ensure that you do not modify the auto-generated code for loading translation.

The following code snippet illustrates the <store-temp>/extensions/features/<feature-name>/src/app/app.module.ts file:

export class BackroomPickBundlesModule {
  static bundles: Array<any> = [
    {
      prefix: './assets/backroom-pick/i18n/',
      suffix: '.json'
    }
  ].concat(CommonBundlesModule.bundles);
}


export function BackroomPickBundlesModuleHttpLoaderFactory(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [].concat(BackroomPickBundlesModule.bundles));
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    CoreModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: BackroomPickBundlesModuleHttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: TranslateMessageFormatCompiler
      },
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})


 export class AppModule implements OnDestroy{
  private langSubscription: Subscription;


  constructor(private translateService: TranslateService,@Inject('STORE_LOCALE_CODE') private _locale: string) {
    this.translateService.setDefaultLang(LocalizationService.getFallbackLanguage());
    this.langSubscription = LocalizationService.lang$.subscribe(lang => {
      this.translateService.use(lang);
    });
    LocalizationService.setLocale(_locale);
  }


  ngOnDestroy() {
    if (UIUtil.isNotVoid(this.langSubscription)) {
      this.langSubscription.unsubscribe();
    }
  }
}

The lazy loaded module initializes the TranslationModule by invoking the forChild() method and also by passing an additional extend:true configuration. This configuration merges the lazy loaded translations with the initially loaded translations in the application root module.
The following code snippet illustrates the <store-temp>/extensions/features/<feature-name>/src/app/features/<module-name>/<module-name>.module.ts file:
```
@NgModule({
  imports: [
    BackroomPickRoutingModule,
    CommonModule,
    CommonComponentsModule,
    FunctionalComponentsModule,
    FormsModule,
    NgbModule,
    TranslateModule.forChild({
      extend: true,
    })
  ]
})
export class BackroomPickModule {}
```