Ngx_translate does not have singleton when using it in remote module

Question

I'm building Angular application using Module Federation and using ngx-translate/core for translations.

When I run application, main app creates single instance and being shared among all child components. But when I load child applications within Main app, translation instance creates new for specific app.

I tried as below

In App.module.ts inside Main App(Container/Host Application), given as below

TranslateModule.forRoot({
 loader: {
   provide: TranslateLoader,
   useClass: CustomTranslateLoader,
   deps: [HttpClient],
 },
 extend: true,
 isolate: false
}

In App.module.ts inside Child Applications, given as below

TranslateModule.forChild({
 loader: {
   provide: TranslateLoader,
   useClass: CustomTranslateLoader,
   deps: [HttpClient],
 },
 extend: true,
 isolate: false
}

In Module Federation config file, configured ngx-translate as below

shared: share({ "ngx-translate/core": {singleton: true, strictVersion: true, requiredVersion: 'auto'}
});

Expected behaviour: single instance will be created and shared amount all child applications with in Main app.

Actual behaviour: New instance is getting created for each application with in Main application.

Any suggestions would be helpful

Ngx_translate does not have singleton when using it in remote module

0 Answers0