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.

Turns out, you should not put package-lock.json in your .gitignore file! Removing that line made the app run again.