APP_INITIALIZER 未在微前端远程中触发

Question

我们正在 Angular 中使用模块联合来实现微前端。我们还使用 APP_INITIALIZER 加载配置，类似于以下两篇博客文章...

• https://www.prestonlamb.com/blog/loading-app-config-in-app-initializer
• https://timdeschryver.dev/blog/angular-build-once-deploy-to-multiple-environments

我们执行上述操作是因为我们实现了“构建一次部署到多个环境”管道方法，并且需要 Kubernetes 可以更改的外部文件来处理我们的配置。上述所有内容在独立的 Angular 应用程序中都非常有效。当通过模块联合远程启动同一应用程序时，所有这些都不起作用。

上述功能的核心是通过 AppModule 中 APP_INITIALIZER 的提供者处理的...

providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: initConfig,
    deps: [AppConfigService],
    multi: true,
  },
]

以及手动获取 main.ts 中的文件（这样我们就可以在 AppModule 本身内部使用配置）...

fetch('/assets/config.json')
  .then((response) => response.json())
  .then((config) => {
    if (environment.production) {
      enableProdMode()
    }
 
    platformBrowserDynamic([{ provide: APP_CONFIG, useValue: config }])
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err))
  })

根据 Angular 文档，“useFactory”中为 APP_INITIALIZER 指定的函数将在应用程序引导期间启动 - “该函数在应用程序引导过程中执行”。在上面的例子中，“initConfig”是函数。作为远程启动时不会发生这种情况。此外，main.ts 中的上述代码在远程启动时不会执行。

底线 - 我们无法让我们的配置在远程 MFE 应用程序中工作。 Angular 应用程序的独立启动方式与通过模块联合远程启动的方式存在一些显着差异。有人可以明确详细说明这些差异是什么，或者引导我到描述差异的链接吗？我们在正常的角度引导过程中具有非常重要的功能，当作为远程启动（即配置）时我们也需要这些功能，但我们不知道如何在微前端中作为远程执行此功能。

Answer 1

从 main.js 扩展你的 appConfig 以使用你的 app_initializer:

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

app.config.ts：

import { appShellConfig } from '@easy-booking/app-shell'

export const appConfig: ApplicationConfig = {
  providers: [...appShellConfig.providers, provideRouter(appRoutes), provideAnimations()]
}

来自您的远程/库 app-shell.config.ts：

export const appShellConfig: ApplicationConfig = {
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeAppFactory,   // <--- your init function
      multi: true,
      // deps: []
    }
    // ...
  ]
}