Angular mfe with @module-federation/enhanced having issue to use ngx-translate with remote apps

To resolve the NullInjectorError: No provider for TranslateStore! in your Nx Module Federation setup, let's ensure that the TranslateStore is correctly provided in both the host and remote applications. Here’s a step-by-step guide:

Host Application Configuration

1. 
   HttpLoaderFactory and provideTranslation:
   
   import { HttpBackend } from '@angular/common/http';
   import { MultiTranslateHttpLoader } from '@ngx-translate/http-loader';
   import { TranslateLoader } from '@ngx-translate/core';
   
   export function HttpLoaderFactory(_httpBackend: HttpBackend) {
   return new MultiTranslateHttpLoader(_httpBackend, [
   '/self-serve/assets/i18n/self-serve/',
   '/self-serve/assets/i18n/landing/',
   '/self-serve/assets/i18n/policy-management/',
   ]);
   }
   
   export const provideTranslation = () => ({
   defaultLanguage: "en",
   loader: {
   provide: TranslateLoader,
   useFactory: HttpLoaderFactory,
   deps: [HttpBackend],
   },
   });
2. 
   Application Configuration:
   
   import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
   import { provideRouter } from '@angular/router';
   import { appRoutes } from './app.routes';
   import { provideTranslateService } from '@ngx-translate/core';
   import { provideHttpClient } from '@angular/common/http';
   
   export const appConfig: ApplicationConfig = {
   providers: [
   provideZoneChangeDetection({ eventCoalescing: true }),
   provideRouter(appRoutes),
   provideHttpClient(),
   provideTranslateService(provideTranslation()),
   ],
   };

Remote Application Configuration

1. 
   Ensure TranslateStore is Provided:
   
   • Since provideTranslateService is shared by @module-federation/enhanced, ensure that TranslateStore is provided in the remote application as well.
2. 
   Remote Application Configuration:
   
   typescript
   
   import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { remoteRoutes } from './remote.routes'; import { provideTranslateService, TranslateLoader } from '@ngx-translate/core'; import { HttpClient, provideHttpClient } from '@angular/common/http'; import { TranslateHttpLoader } from '@ngx-translate/http-loader';
   
   const httpLoaderFactory = (http: HttpClient) => new TranslateHttpLoader(http, './public/i18n', '.json');
   
   export const remoteConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(remoteRoutes), provideHttpClient(), provideTranslateService({ defaultLanguage: "es", useDefaultLang: true, loader: { provide: TranslateLoader, useFactory: httpLoaderFactory, deps: [HttpClient], }, }), ], };
   
   
3. 
   Bootstrap the Remote Application:
   
   import { bootstrapApplication } from '@angular/platform-browser';
   import { RemoteEntryComponent } from './app/remote-entry/entry.component';
   import { remoteConfig } from './app/remote.config';
   
   bootstrapApplication(RemoteEntryComponent, remoteConfig).catch(err => console.error(err));

Continue reading...