Angular 模块联合 NullInjectorError

Question

我已经与 Module Federation 和 Angular 启动了一个 NX 项目。我有 2 个遥控器和 1 个 shell 应用程序，沿着这些应用程序，我还有 2 个共享库：ui-common 和 util-common。在我名为

TranslationService

的共享服务中，我使用来自名为

TranslateService

的图书馆的服务

@ngx-translate

。

每个应用程序（shell 和遥控器）都使用引导函数通过 app.config.ts 文件引导应用程序：

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

我的所有 app.config.ts 文件都提供包含

NgxTranslateRoutesModule

的

TranslateService

，如下所示：

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()
    ]),
}

当我单独运行遥控器时，一切正常。然而，当运行我的 shell 时，我在

bootstrap.ts:6

和

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)

我已将此服务注入到我的 TranslationService 中，如下所示：

private _translateService = inject(TranslateService);

（使用 Angular 18）。

从我的 module-federation.config.ts 中删除 2 个遥控器时，问题来了一切都按预期工作！但我有一种感觉，我需要这些，所以把这些排除在外对我来说感觉非常错误：

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

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

export default config;

我无法从我的 shell 模块联合配置中删除这些遥控器。我认为这与共享依赖有关，但我无法理解它。请帮助我。

我尝试了什么：

• 删除了代码中与 TranslateService 相关的联系，错误仍然存在。这让我相信它可能与 TranslateLoader 有关。
• 在模块 federation.config 中将@ngx-translate/core更改为shared = false，错误仍然存在。
• 提供了 TranslateService 而不是模块，循环依赖错误。
• 删除了节点模块文件夹并重新安装了所有依赖项。

Answer 1

事实证明，你不应该将 package-lock.json 放在 .gitignore 文件中！删除该行使应用程序再次运行。