Angular Universal SSR 集成i18n时服务端未正确加载对应locale翻译问题

问题根因 #

你遇到的闪切问题是服务端构建未开启本地化配置导致的：仅浏览器端构建做了多语言编译，服务端渲染时始终使用源语言（es）的代码生成HTML，等客户端hydrate完成后才会替换为对应语言的翻译内容，完全不符合SEO需求。

修复步骤 #

1. 调整angular.json的服务端构建配置 #

找到architect下的server配置块，在options中添加"localize": true，和browser构建的配置保持一致：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/web/server",
    "main": "src/main.server.ts",
    "tsConfig": "tsconfig.server.json",
    "localize": true // 新增这行，开启服务端构建的多语言编译
  },
  "configurations": {
    "production": {
      // 原有production配置保持不变
    }
  }
}

2. 调整构建命令 #

原有命令仅会生成单份服务端构建产物，开启localize后会自动为每个locale生成独立的服务端代码，构建命令无需额外参数，原有重复的--configuration=production可删除（--prod默认对应production配置）：

ng build --prod && ng run web:server:production

构建完成后检查dist/web/server目录，会生成es、en-US两个子目录，各包含对应语言的服务端运行代码。

3. 修改server.ts加载对应语言的服务端模块 #

原来的ngExpressEngine写死加载统一的AppServerModule，现在需要根据语言参数加载对应locale的服务端模块：
首先在server.ts顶部导入各语言的服务端模块：

import * as serverModuleEs from './dist/web/server/es/main';
import * as serverModuleEn from './dist/web/server/en-US/main';

然后修改app函数内的引擎配置：

server.engine('html', ngExpressEngine({
  // 根据传入的lang参数加载对应语言的启动模块
  bootstrap: lang === 'es' ? serverModuleEs.AppServerModule : serverModuleEn.AppServerModule,
  extraProviders: [{ provide: LOCALE_ID, useValue: lang }],
} as any));

验证 #

重启服务后访问http://localhost:4000/en-US/，直接查看页面源码，就能看到服务端返回的HTML已经是英文翻译内容，不会再出现几秒后闪切的问题，爬虫可正常抓取对应语言的内容。

内容的提问来源于stack exchange，提问作者D.Pacheco