Angular Module Federation NullInjectorError

I've initiated an NX project with Module Federation and Angular. I have 2 remotes and 1 shell application, along those application I also have 2 shared libraries: ui-common and util-common. In my shared service called TranslationService I use a service TranslateService from a library called @ngx-translate.

Every application (shell and remotes) uses a bootstrap function to bootstrap the application with an app.config.ts file:

bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);


All of my app.config.ts files provide the NgxTranslateRoutesModule containing the TranslateService like so:

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({eventCoalescing: true}),
provideRouter(appRoutes),
provideHttpClient(),
importProvidersFrom([
TranslateModule.forRoot({
defaultLanguage: 'en',
useDefaultLang: true,
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
}),
NgxTranslateRoutesModule.forRoot()
]),
}


When running my remotes isolated, everything works fine. When running my shell however, I get this error on bootstrap.ts:6 and core.mjs:6620.

NullInjectorError: NullInjectorError: No provider for TranslateService!
at NullInjector.get (core.mjs:1660:27)
at R3Injector.get (core.mjs:3106:33)
at R3Injector.get (core.mjs:3106:33)
at injectInjectorOnly (core.mjs:1107:40)
at ɵɵinject (core.mjs:1113:60)
at inject (core.mjs:1199:12)
at new TranslationService (translation.service.ts:15:37)
at Object.TranslationService_Factory [as factory] (translation.service.ts:58:4)
at core.mjs:3234:47
at runInInjectorProfilerContext (core.mjs:872:9)


I've injected this service in my TranslationService like this: private _translateService = inject(TranslateService); (using Angular 18).

Here comes the catch, when removing the 2 remotes from my module-federation.config.ts everything works as expected! But I have a feeling I need those so leaving these out feels very wrong to me:

import { ModuleFederationConfig } from '@nx/webpack';

const config: ModuleFederationConfig = {
name: 'shell',
remotes: [] // <--- Empty array (instead of ['remote1', 'remote2'])
};

export default config;


I can't with a good feeling remove these remotes from my shell module federation config. And I think it has something to do with sharing depencendies, but I can't get my head around it. Please help me.

What did I try:

• Removed ties relating to the TranslateService in the code, error still persists. Which leads me to believe it might have something to do with the TranslateLoader.
• Changed @ngx-translate/core to shared = false in the module federation.config, error still persists.
• Provided the TranslateService instead of the module, circular depenceny error.
• Removed node modules folder and reinstalled all dependencies.

Continue reading...