如何借助Google Translate API实现ngx-translate自动翻译及JSON填充

阿华AIGC实验室

2026-5-14

使用Google Translate API结合ngx-translate实现自动翻译并填充JSON文件

嘿，我来帮你搞定这两个关于ngx-translate和Google Translate API的问题，这俩需求其实可以串起来处理，咱们一步步来：

1. 如何使用Google Translate API在ngx-translate中实现自动翻译？

首先得明确：ngx-translate本身是前端的翻译加载库，直接在前端调用Google Translate API会有密钥暴露的风险，所以更推荐在构建阶段用Node.js脚本自动生成翻译文件，再让ngx-translate读取这些文件。具体步骤如下：

第一步：搞定Google Cloud的API配置
先去Google Cloud控制台创建一个项目，找到「Cloud Translation API」并启用它。然后创建一个服务账号，下载对应的密钥文件（JSON格式），把这个文件存到项目里的安全位置（别提交到代码仓库！）。
第二步：安装必要的依赖
除了ngx-translate的核心包（@ngx-translate/core和@ngx-translate/http-loader），还要装Google Translate的Node.js客户端：
```
npm install @google-cloud/translate --save-dev
```

第三步：写一个自动翻译的Node.js脚本
在项目根目录新建scripts/translate.js文件，内容大概是这样（根据你的源语言、目标语言和文件路径调整）：

const { Translate } = require('@google-cloud/translate').v2;
const fs = require('fs');
const path = require('path');

// 用服务账号密钥初始化翻译客户端
const translate = new Translate({
  keyFilename: path.join(__dirname, '../your-service-account-key.json')
});

// 配置源语言和需要翻译的目标语言
const sourceLang = 'zh-CN'; // 比如你的源语言是中文
const targetLangs = ['en', 'es', 'fr']; // 要生成的目标语言

// 读取源翻译文件（比如assets/i18n/zh.json）
const sourceFilePath = path.join(__dirname, '../src/assets/i18n/zh.json');
const sourceTranslations = JSON.parse(fs.readFileSync(sourceFilePath, 'utf8'));

// 批量翻译并写入文件
async function generateTranslations() {
  for (const targetLang of targetLangs) {
    const result = {};
    for (const [key, text] of Object.entries(sourceTranslations)) {
      // 调用Google翻译API
      const [translation] = await translate.translate(text, targetLang);
      result[key] = translation;
    }
    // 写入目标语言的JSON文件
    const targetFilePath = path.join(__dirname, `../src/assets/i18n/${targetLang}.json`);
    fs.writeFileSync(targetFilePath, JSON.stringify(result, null, 2));
    console.log(`✅ 已生成${targetLang}语言的翻译文件`);
  }
}

// 执行翻译
generateTranslations().catch(err => console.error('❌ 翻译出错：', err));

第四步：确保ngx-translate配置正确
在你的Angular项目的app.module.ts里，已经正确配置了ngx-translate的加载器，让它读取assets/i18n/下的JSON文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';

// 定义翻译文件加载器
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      defaultLanguage: 'zh-CN'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 如何通过ngx-translate自动翻译字符串并填充至JSON文件？

你提到编译时只有键名，没有翻译值，这是因为你可能只提取了键但没生成翻译内容。可以结合提取工具和上面的翻译脚本解决：

第一步：用提取工具把模板里的键导出到源JSON
安装ngx-translate-extract工具，它能自动扫描你的Angular模板和代码，提取所有翻译键：
```
npm install @biesbjerg/ngx-translate-extract --save-dev
```
然后在package.json的scripts里加一个提取命令：
```
"scripts": {
  "extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/zh.json --clean --sort"
}
```
执行npm run extract后，zh.json里就会有所有提取出来的键，但值是空的，这时候你需要先给源语言的键填上对应的文本（比如{"welcome": "欢迎"}），这样翻译API才能正常工作。
第二步：把提取和翻译串起来
修改package.json的脚本，让它先提取键，再自动翻译：
```
"scripts": {
  "extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/zh.json --clean --sort",
  "translate": "npm run extract && node scripts/translate.js",
  "build": "npm run translate && ng build"
}
```
这样每次执行npm run build时，会先提取所有翻译键到源JSON，再自动翻译到目标语言文件，最后构建项目，这时候ngx-translate就能读取到带翻译值的文件了。
几个小提醒
- 源JSON文件里的键值必须是源语言的完整文本，不然Google API没法正确翻译。
- 服务账号密钥一定要放在.gitignore里，别泄露出去！
- 机器翻译可能不够精准，翻译后可以手动调整专业术语或者语境特殊的文本。