दस्तावेज़ीकरण

प्राथमिक सेटअप

अपने प्रोजेक्ट में Angular का स्थानीयकरण पैकेज जोड़ने से शुरू करें:

ng add @angular/localize

इस कमांड से निम्नलिखित परिवर्तन होंगे:

• @angular/localize पैकेज को आपकी निर्भरता में जोड़ें
• angular.json में polyfills array में "@angular/localize/init" जोड़ें
• अपने main.ts में निम्नलिखित संदर्भ जोड़ें:

/// <reference types="@angular/localize" />

यह भी extract-i18n कॉन्फ़िगरेशन को angular.json में जोड़ देगा:

"extract-i18n": {
  "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
  "options": {
    "buildTarget": "your-app:build",
    "format": "xlf",
    "outputPath": "src/locale",
    "includeContext": true,
    "resetTranslationState": true,
    "targetFiles": [
      "messages.fr.xlf",
      "messages.vi.xlf"
    ]
  }
}

नोट: हम बाद में अपनी वर्कफ़्लो के अनुसार कॉन्फ़िगरेशन में outputPath को संशोधित करेंगे।

Angular i18n CLI Tool

To simplify the management of Angular i18n configuration, you can use our CLI tool:

npm install --save-dev @softwarity/angular-i18n-cli

This tool provides several features to streamline your i18n workflow:

• Easy initialization of i18n configuration in your Angular project
• Simple addition and removal of locales
• Automatic configuration of build settings for each locale
• Proper setup of XLIFF file formats

अनुवाद उपकरण स्थापित करें

अनुवाद फ़ाइलों का प्रबंधन करने के लिए, हम ng-extract-i18n-merge का उपयोग करेंगे, जो अनुवादों को निकालने और मर्ज करने की प्रक्रिया को सरल बनाता है:

npm install --save-dev ng-extract-i18n-merge

यह उपकरण कई लाभ प्रदान करता है:

• अपने एप्लिकेशन से अनुवाद करने योग्य स्ट्रिंग्स को स्वचालित रूप से निकालता है
• एकल चरण में नए अनुवादों को मौजूदा अनुवादों के साथ मिलाता है
• मौजूदा अनुवादों को अद्यतनों के दौरान बनाए रखता है
• कई लक्ष्य भाषाओं का समर्थन करता है

कॉन्फ़िगरेशन फ़ाइलें

"scripts": {
  ...
  "extract-i18n": "ng extract-i18n",
  "build": "ng build --localize"
  ...
}

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": {
      "translation": "src/locale/messages.fr.xlf"
    },
    "vi": {
      "translation": "src/locale/messages.vi.xlf"
    }
  }
},

"extract-i18n": {
  "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
  "options": {
    "buildTarget": "your-app:build",
    "format": "xlf",
    "outputPath": "src/locale",
    "includeContext": true,
    "resetTranslationState": true,
    "targetFiles": [
      "messages.fr.xlf",
      "messages.vi.xlf"
    ]
  }
}

"architect": {
  "build": {
    "configurations": {
      "fr": {
        "localize": ["fr"]
      },
      "vi": {
        "localize": ["vi"]
      }
    }
  }
}

अनुवाद के लिए घटकों को तैयार करें

<tag attribute="This is a sample attribute text that needs translation." 
  i18n-attribute="@@ATTRIBUTE_TEXT"
  i18n="@@TAG_TEXT">This is a sample text that needs translation.</tag>
// EXAMPLE
<button title="Title button" i18n-title="@@TITLE_BUTTON"i18n="@@LABEL_BUTTON">label button</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '...'
})
export class ExampleComponent {
  title = $localize`:@@PAGE_TITLE:Welcome to our application`;
  errorMessage = $localize`:@@ERROR_MESSAGE:An error occurred while processing your request`;
}

बिल्डिंग और सर्विंग

npm run build

ng build --configuration=fr

ng serve --configuration=fr