Angular应用多语言翻译方案咨询：已用ngx-translate，需一键全量翻译

Hey there! Let's figure out how to automate full-app translations for your Angular project using ngx-translate. I’ve done this a few times, so here’s a practical, step-by-step approach that lets you hit one command and get all your languages translated:

First things first: make sure you have a complete base translation file (usually en.json if English is your source language) that includes every translatable string in your app. If you haven’t already extracted all keys, use the ngx-translate-extract tool to automatically scan your templates and TypeScript files for translate pipe usage and TranslateService calls.

• Install the tool:

  npm install @biesbjerg/ngx-translate-extract --save-dev
  

• Add this script to your package.json:

  "scripts": {
    "extract:translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/en.json --clean --sort"
  }
  

• Run it to generate/update your base file:

  npm run extract:translations
  

This will pull every translatable key into en.json, so you have a single source of truth for all strings.

We’ll use a Node.js script with a translation API (I recommend Google Cloud Translate for reliability, but you can adapt this for other APIs like DeepL) to translate the base file into all your target languages in one go.

Step 2.1: Install Dependencies #

npm install @google-cloud/translate fs-extra

Step 2.2: Write the Translation Script #

Create a file named translate-all.js in your project root:

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

// Configure your API key and target languages
const translateClient = new Translate({ key: 'YOUR_GOOGLE_CLOUD_API_KEY' });
const targetLanguages = ['es', 'fr', 'de', 'zh-CN']; // Add all languages you need
const baseTranslationPath = './src/assets/i18n/en.json';

async function runFullTranslation() {
  // Read the base translation file
  const baseTranslations = await fs.readJson(baseTranslationPath);
  const allKeys = Object.keys(baseTranslations);

  for (const lang of targetLanguages) {
    const targetFilePath = `./src/assets/i18n/${lang}.json`;
    // Preserve existing translations (so you don't overwrite manual edits)
    let existingTranslations = {};
    if (await fs.pathExists(targetFilePath)) {
      existingTranslations = await fs.readJson(targetFilePath);
    }

    // Only translate keys that don't already have a translation
    const keysToTranslate = allKeys.filter(key => !existingTranslations[key]);
    const textsToTranslate = keysToTranslate.map(key => baseTranslations[key]);

    if (textsToTranslate.length === 0) {
      console.log(`✅ No new strings to translate for ${lang}`);
      continue;
    }

    // Call the translation API
    try {
      const [translations] = await translateClient.translate(textsToTranslate, lang);
      // Merge new translations with existing ones
      keysToTranslate.forEach((key, index) => {
        existingTranslations[key] = translations[index];
      });

      // Write the updated translation file
      await fs.writeJson(targetFilePath, existingTranslations, { spaces: 2 });
      console.log(`✅ Successfully updated ${lang} translations!`);
    } catch (err) {
      console.error(`❌ Failed to translate ${lang}:`, err.message);
    }
  }
}

// Run the script
runFullTranslation().catch(err => console.error('❌ Translation process failed:', err));

Step 2.3: Add a One-Click Command #

Add this script to your package.json to make it easy to run:

"scripts": {
  // ... your existing scripts
  "translate:all": "node translate-all.js"
}

Now you can run npm run translate:all to trigger a full translation of all missing strings across your target languages.

Machine translation isn’t perfect, so add these safeguards to avoid issues:

• Whitelist untranslatable terms: If you have brand names, technical jargon, or acronyms that shouldn’t be translated, add a whitelist to the script:

  const untranslatableTerms = ['Angular', 'Dashboard', 'MyBrand'];
  // Modify the textsToTranslate line to check for whitelisted terms
  const textsToTranslate = keysToTranslate.map(key => {
    const text = baseTranslations[key];
    return untranslatableTerms.includes(text) ? text : text;
  });
  

• Check pluralization/interpolation: ngx-translate supports pluralization (e.g., "items": "1 item |||| {{count}} items") and interpolation. Machine translation might mangle these, so always spot-check these strings after running the script.
• Back up files first: Before running the script, make sure you have a backup of your existing translation files (or use version control) to avoid losing manual edits.

After running the script, take a quick pass through each language file to fix any awkward translations or formatting issues. This only takes a few minutes and ensures your app feels polished for all users.

内容的提问来源于stack exchange，提问作者Supreeth B S