基于ngx-translate构建多语言应用及适配Angular i18n的技术咨询

1. 构建多语言版本应用的脚本实现 #

可以通过跨平台脚本批量构建不同语言版本，核心是为每种语言执行Angular构建命令，并确保对应语言文件部署到产物目录中。

方案一：Node.js脚本（跨平台通用） #

创建build-i18n.js文件：

const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

// 定义需要构建的语言列表
const languages = ['en', 'fr', 'de'];

languages.forEach(lang => {
  console.log(`开始构建${lang}语言版本...`);
  // 执行Angular生产构建，输出到对应语言的子目录
  execSync(`ng build --configuration production --output-path dist/${lang}`, { stdio: 'inherit' });
  
  // 确保产物的i18n目录存在
  const targetI18nDir = path.join(__dirname, 'dist', lang, 'assets', 'i18n');
  if (!fs.existsSync(targetI18nDir)) {
    fs.mkdirSync(targetI18nDir, { recursive: true });
  }
  
  // 复制对应语言的JSON文件到产物目录
  fs.copyFileSync(
    path.join(__dirname, 'src', 'assets', 'i18n', `ws-${lang}.json`),
    path.join(targetI18nDir, `ws-${lang}.json`)
  );
  
  console.log(`${lang}语言版本构建完成，产物路径：dist/${lang}`);
});

在package.json中添加启动脚本：

"scripts": {
  "build:i18n": "node build-i18n.js"
}

执行构建：npm run build:i18n

方案二：Shell脚本（适用于Linux/macOS） #

创建build-i18n.sh文件：

#!/bin/bash

# 语言列表
LANGUAGES=("en" "fr" "de")

for lang in "${LANGUAGES[@]}"
do
  echo "构建${lang}版本..."
  ng build --configuration production --output-path dist/${lang}
  mkdir -p dist/${lang}/assets/i18n
  cp src/assets/i18n/ws-${lang}.json dist/${lang}/assets/i18n/
  echo "${lang}版本构建完成：dist/${lang}"
done

添加npm脚本：

"scripts": {
  "build:i18n": "bash build-i18n.sh"
}

执行构建：npm run build:i18n

2. ngx-translate与原生Angular i18n的适配及xlf文件生成 #

两者共存适配 #

ngx-translate（运行时切换）和原生Angular i18n（编译时多产物）可以共存，分工使用即可：

• 原生i18n用于静态固定文本（如页面标题、导航栏），利用编译时构建减少运行时开销；
• ngx-translate用于需要动态切换的场景（如用户手动切换语言），保留灵活切换能力；
• 配置上各自独立：原生i18n在angular.json中配置本地化构建，ngx-translate在AppModule中初始化加载JSON资源，两者逻辑互不干扰。

从ngx-translate JSON生成xlf文件 #

可以通过自定义脚本将JSON翻译资源转换为Angular原生的xlf格式，示例脚本如下：
创建json-to-xlf.js文件：

const fs = require('fs');
const path = require('path');

// 接收参数：源JSON路径、目标xlf路径、目标语言代码
const [srcPath, targetPath, lang] = process.argv.slice(2);

if (!srcPath || !targetPath || !lang) {
  console.error("用法：node json-to-xlf.js <源JSON文件> <目标xlf文件> <语言代码>");
  process.exit(1);
}

// 读取JSON翻译内容
const translations = require(path.resolve(srcPath));

// 生成xlf 2.0格式内容
const xlfContent = `<?xml version="1.0" encoding="UTF-8"?>
<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0">
  <file source-language="en" target-language="${lang}" datatype="plaintext" original="ng2.template">
    <body>
      ${Object.entries(translations).map(([key, value]) => `
        <unit id="${key}">
          <segment>
            <source>${key}</source>
            <target>${value}</target>
          </segment>
        </unit>
      `).join('')}
    </body>
  </file>
</xliff>`;

// 写入xlf文件
fs.writeFileSync(targetPath, xlfContent, 'utf8');
console.log(`已生成xlf文件：${targetPath}`);

使用示例：

# 生成英文xlf文件
node json-to-xlf.js src/assets/i18n/ws-en.json src/locale/messages.en.xlf en
# 生成法文xlf文件
node json-to-xlf.js src/assets/i18n/ws-fr.json src/locale/messages.fr.xlf fr

如果需要处理HTML标签、占位符等复杂场景，可以扩展脚本的字符串转义逻辑。

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