NX工作区动态Angular MFE（独立API）中NGX-translate远程资产加载问题

问题背景 #

我在配置为动态Angular MFE（独立API）的NX工作区中使用ngx-translate库，目标是打造一个可构建的shared-assets库，同时让每个应用拥有独立的assets/i18n目录。

目前已实现：

• shared-assets库的资产可对外暴露
• Shell应用能获取自身资产（apps/shell/assets/i18n）和shared-assets库中的资产（libs/shared-assets/src/assets/i18n），并已通过网络请求面板验证

遇到的问题：访问远程应用时，该应用无法获取自身的assets/i18n资产。

当前配置 #

Shell应用的bootstrap.ts #

export function httpLoaderFactory(http: HttpBackend) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: '/assets/i18n/core/', suffix: '.json' },
    { prefix: '/assets/i18n/', suffix: '.json' },
  ]);
}

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(BrowserModule),
    provideHttpClient(),
    importProvidersFrom([BrowserAnimationsModule]),
    provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
    importProvidersFrom(
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: httpLoaderFactory,
          deps: [HttpBackend],
        }
      })
    ),
  ],
}).catch((err) => console.error(err));

Shell应用的project.json（资产配置） #

"assets": [
  "apps/shell/src/favicon.ico",
  "apps/shell/src/assets",
  {
    "input": "libs/shared-assets/src/assets/i18n",
    "glob": "**/*.json",
    "output": "assets/i18n/core"
  }
]

解决步骤 #

1. 配置远程应用的资产打包路径 #

修改远程应用的project.json，将自身assets/i18n资产打包到独立的命名空间路径，避免和其他应用资产冲突：

"assets": [
  "apps/remote-app/src/favicon.ico",
  {
    "input": "apps/remote-app/src/assets/i18n",
    "glob": "**/*.json",
    "output": "assets/i18n/remote-app" // 用远程应用名称作为专属子路径
  }
]

2. 远程应用单独配置ngx-translate加载器 #

在远程应用的bootstrap.ts中，配置专属的TranslateLoader，同时加载shared核心翻译和自身翻译文件：

export function remoteHttpLoaderFactory(http: HttpBackend) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: '/assets/i18n/core/', suffix: '.json' }, // 加载shared核心翻译
    { prefix: '/assets/i18n/remote-app/', suffix: '.json' }, // 加载自身翻译文件
  ]);
}

bootstrapApplication(RemoteAppComponent, {
  providers: [
    importProvidersFrom(BrowserModule),
    provideHttpClient(),
    importProvidersFrom(TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: remoteHttpLoaderFactory,
        deps: [HttpBackend],
      }
    })),
    // 其他必要的providers
  ],
}).catch(err => console.error(err));

3. 确保MFE资产路由可访问 #

• 检查远程应用project.json的build配置，确认资产输出路径正确
• 部署时，将所有MFE的i18n资产放置在服务器的assets/i18n目录对应子路径下；本地开发时，可在Shell的proxy.conf.json中配置转发规则，将远程应用的资产请求指向其构建输出目录

4. 验证加载状态 #

启动应用后，在浏览器网络面板检查远程应用对应的/assets/i18n/remote-app/[lang].json请求状态，若返回404，核对打包路径和加载器配置的路径是否一致。

内容的提问来源于stack exchange，提问作者Arigui Ahmed