如何在基于@angular/localize的Angular国际化应用中共享公共资源与通用代码

当然可以实现这个需求！Angular的@angular/localize配合构建工具的配置，完全能让你把公共资源留在根目录，只把语言差异的部分放到对应子目录里。我来一步步帮你调整配置和实现思路：

1. 先修正现有配置里的笔误 #

你当前的angular.json配置有几处不匹配的地方，先调整过来避免构建报错：

• locales里的键和翻译文件不对应（比如uk对应了messages.fr.json），要让键与语言标识、翻译文件一一对应
• configurations里的localize数组值必须和locales的键一致

修正后的i18n部分示例：

"i18n": {
  "sourceLocale": "en-US",
  "locales": {
    "fr": "src/locale/messages.fr.json",
    "ru": "src/locale/messages.ru.json"
  }
},

2. 调整构建输出路径与基础路由 #

把源语言（en-US）直接输出到dist根目录，其他语言输出到对应子目录，同时配置正确的baseHref确保路由正常：

"configurations": {
  "en": {
    "baseHref": "/",
    "outputPath": "dist/"
  },
  "fr": {
    "localize": ["fr"],
    "baseHref": "/fr/",
    "outputPath": "dist/fr/"
  },
  "ru": {
    "localize": ["ru"],
    "baseHref": "/ru/",
    "outputPath": "dist/ru/"
  }
}

3. 开启公共代码与资源复用 #

Angular默认支持提取公共chunk，只要在build的options里开启相关配置，就能让服务、守卫、管道这类非UI公共代码，以及静态资源实现共享：

在projects -> [你的项目名] -> architect -> build -> options里添加或确认以下配置：

"options": {
  // 其他现有配置...
  "vendorChunk": true,
  "commonChunk": true,
  "extractLicenses": true,
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
}

• vendorChunk和commonChunk：会把第三方依赖、公共业务代码提取到根目录的独立chunk中，所有语言包共享这些文件
• assets：把favicon、静态资源直接复制到dist根目录，各个语言包通过相对路径就能访问，无需重复打包

4. 验证构建结果 #

运行对应的构建命令：

• 构建源语言：ng build --configuration=en
• 构建法语包：ng build --configuration=fr
• 构建俄语包：ng build --configuration=ru

构建完成后，dist目录结构会是这样：

dist/
├── assets/          # 所有语言共享的静态资源
├── favicon.ico      # 共享网站图标
├── vendor.xxx.js    # 共享第三方依赖
├── common.xxx.js    # 共享公共业务代码（服务、守卫等）
├── main.xxx.js      # 源语言（en-US）的差异代码
├── index.html       # 源语言入口文件
├── fr/
│   ├── main.xxx.js  # 法语差异代码
│   └── index.html   # 法语入口文件
└── ru/
    ├── main.xxx.js  # 俄语差异代码
    └── index.html   # 俄语入口文件

可以看到，只有语言相关的差异代码（翻译后的模板、语言特定逻辑）会放在子目录，公共部分全部留在根目录共享。

5. 额外优化：加快多语言构建速度 #

开启构建缓存，让Angular复用之前编译的公共代码，减少重复构建时间：

• 在build的options里添加"cache": true
• 或者构建时加上--cache参数，比如：ng build --configuration=fr --cache

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