Angular 12生产构建后Transloco不生效，开发环境正常是什么原因？

问题解决步骤 #

1. 优先排查路径404问题 #

这是最常见的生产环境翻译失效原因，你当前TranslocoHttpLoader中使用的是绝对路径请求翻译文件：

return this.http.get<Translation>(`/assets/i18n/${lang}.json`);

绝对路径会强制从域名根目录请求资源，如果你的应用没有部署在域名根路径，或者base href配置不匹配，就会出现404无法获取翻译文件的问题，表现为仅显示翻译键。

修复方法：

将绝对路径改为相对路径：

return this.http.get<Translation>(`./assets/i18n/${lang}.json`);

如果你的应用部署在子路径下，构建时还要指定对应base href：

ng build --configuration production --base-href /你的子路径名称/

2. 检查AOT扁平化配置兼容性 #

你当前配置中开启了生产环境AOT模式下的翻译扁平化功能：

flatten: {
  aot: environment.production
}

开启该配置后，Transloco会默认寻找经transloco-keys-manager提取生成的扁平化翻译文件，如果你没有在构建前执行翻译键提取操作，就会无法匹配到翻译内容。

修复方法二选一：

• 不需要扁平化功能的话，直接删除flatten配置项即可
• 需要保留扁平化功能的话，先安装@ngneat/transloco-keys-manager依赖，再修改package.json的构建命令，构建前先执行提取操作：

  "scripts": {
    "build": "transloco-keys-manager extract && ng build --configuration production"
  }
  

3. 校验资源打包配置 #

打开项目根目录的angular.json，找到对应项目的architect.build.options.assets配置项，确认已经包含src/assets路径，保证打包时i18n目录会被复制到dist产物中：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

验证方法 #

修改配置后重新执行生产构建，打开浏览器控制台切换到「网络」面板，刷新页面查看对应lang.json文件的请求状态：

• 若状态码为200且返回内容和本地src/assets/i18n下的文件一致，说明配置修复成功
• 若仍为404，可手动访问http://你启动的服务地址/assets/i18n/eng.json确认文件是否可访问

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