NX微前端架构下跨应用共享翻译资源的可行方案咨询

1. 迁移翻译文件到公共库 #

在你的公共库（比如libs/shared-i18n）下新建src/assets/i18n目录，把en.json、es.json移到这里。然后修改库的project.json（NX 16及以上版本），确保静态资源被正确打包：

{
  "targets": {
    "build": {
      "options": {
        "assets": [
          "src/assets/i18n"
        ]
      }
    }
  }
}

2. 配置应用访问公共库的翻译文件 #

修改宿主和每个远程应用的project.json，把公共库的翻译文件添加到应用的构建资源列表中，这样构建时会自动将这些json文件复制到应用的assets/i18n目录：

{
  "targets": {
    "build": {
      "options": {
        "assets": [
          // 保留原有assets配置，新增以下规则
          {
            "input": "libs/shared-i18n/src/assets/i18n",
            "output": "assets/i18n",
            "glob": "*.json"
          }
        ]
      }
    },
    "serve": {
      "options": {
        "assets": [
          // 同样添加上述规则，保证本地开发时能访问到文件
        ]
      }
    }
  }
}

3. 统一翻译加载路径配置 #

调整宿主和远程应用的HttpLoaderFactory，确保加载路径指向正确位置（此时翻译文件已同步到各应用的assets/i18n目录）：

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

TranslateModule.forRoot({
  defaultLanguage: 'en',
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient],
  },
})

4. 封装公共翻译模块（可选优化） #

如果不想每个应用重复配置TranslateModule，可以在公共库中封装一个SharedI18nModule：

// libs/shared-i18n/src/lib/shared-i18n.module.ts
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  exports: [TranslateModule],
  imports: [
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    })
  ]
})
export class SharedI18nModule {}

之后宿主和远程应用的AppModule直接导入SharedI18nModule即可，无需重复配置TranslateModule。

验证效果 #

• 启动宿主应用，访问远程应用，确认翻译正常显示。
• 单独启动任意远程应用，打开浏览器网络请求面板，检查是否成功加载assets/i18n/en.json（或对应语言的文件），确认翻译功能生效。

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