Angular 16中使用ngx-translate加载.po翻译文件的适配方案

1. 适配 Angular 16 的 .po 文件加载方案 #

现有第三方 TranslatePoHttpLoader 大多未适配 Angular 16，最可靠的方式是自定义 TranslateLoader 结合成熟的 po 文件解析库，实现步骤如下：

步骤1：安装依赖 #

安装用于解析 po 文件的库：

npm install gettext-parser
npm install @types/gettext-parser --save-dev # 可选，用于 TypeScript 类型提示

步骤2：实现自定义 Po 加载器 #

创建 custom-po-translate-loader.ts 文件：

import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { po } from 'gettext-parser';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export class CustomPoTranslateLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    private prefix: string = 'assets/i18n',
    private suffix: string = '.po'
  ) {}

  getTranslation(lang: string): Observable<Record<string, string>> {
    const url = `${this.prefix}/${lang}${this.suffix}`;
    return this.http.get(url, { responseType: 'text' }).pipe(
      map(poContent => {
        const parsedData = po.parse(poContent);
        const translations: Record<string, string> = {};

        // 提取基础翻译（无上下文、非复数条目）
        Object.entries(parsedData.translations['']).forEach(([msgid, entry]) => {
          translations[msgid] = entry.msgstr[0] || msgid;
        });

        // 可选：处理带上下文的翻译
        Object.keys(parsedData.translations).forEach(context => {
          if (context === '') return;
          Object.entries(parsedData.translations[context]).forEach(([msgid, entry]) => {
            translations[`${context}.${msgid}`] = entry.msgstr[0] || msgid;
          });
        });

        return translations;
      })
    );
  }
}

步骤3：在 AppModule 中配置加载器 #

修改 app.module.ts：

import { CustomPoTranslateLoader } from './custom-po-translate-loader';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';

// ...

export function createTranslateLoader(http: HttpClient) {
  return new CustomPoTranslateLoader(http, 'assets/i18n', '.po');
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  // 其他模块配置...
})
export class AppModule {}

2. Angular 16 处理 .po 文件的推荐做法 #

结合翻译工作流的实际需求，推荐两种方案：

方案A：实时解析 .po 文件（适合动态更新场景） #

使用上述自定义加载器方案，优势是无需额外构建步骤，直接加载并解析 po 文件，适合需要动态切换语言或 po 文件可能频繁更新的场景。

方案B：构建时转换为 JSON（性能优先推荐） #

保留客户的 .pot/.po 工作流，在构建阶段将 po 文件转换为 ngx-translate 原生支持的 JSON 文件，性能更优：

步骤1：安装转换工具

npm install po2json --save-dev

步骤2：添加转换脚本

在 package.json 的 scripts 中添加批量转换脚本：

"scripts": {
  "translate:po2json": "node -e \"const fs = require('fs'); const path = require('path'); const po2json = require('po2json'); const dir = 'assets/i18n'; fs.readdirSync(dir).forEach(file => { if (file.endsWith('.po')) { const poPath = path.join(dir, file); const jsonPath = poPath.replace('.po', '.json'); const poContent = fs.readFileSync(poPath, 'utf8'); const jsonData = po2json.parse(poContent, { format: 'json' }); fs.writeFileSync(jsonPath, JSON.stringify(jsonData, null, 2)); } })\""
}

步骤3：构建前执行转换

运行脚本将所有 po 文件转为 JSON：

npm run translate:po2json

步骤4：使用默认 JSON 加载器

修改 app.module.ts 切换到默认的 TranslateHttpLoader：

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

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