Tài liệu

Cài đặt ban đầu

Bắt đầu bằng cách thêm gói định vị Angular vào dự án của bạn:

ng add @angular/localize

Lệnh này sẽ thực hiện các thay đổi sau:

• Thêm gói @angular/localize vào các phụ thuộc của bạn
• Thêm "@angular/localize/init" vào mảng polyfills trong angular.json
• Thêm tham chiếu sau vào main.ts của bạn:

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

Nó cũng sẽ thêm cấu hình extract-i18n vào 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"
    ]
  }
}

Lưu ý: Chúng tôi sẽ điều chỉnh outputPath sau trong cấu hình để phù hợp với quy trình làm việc của chúng tôi.

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

Cài đặt Công cụ Dịch thuật

Để quản lý các tệp dịch, chúng tôi sẽ sử dụng ng-extract-i18n-merge, công cụ này đơn giản hóa quá trình trích xuất và gộp các bản dịch:

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

Công cụ này cung cấp một số lợi ích:

• Tự động trích xuất các chuỗi có thể dịch từ ứng dụng của bạn
• Gộp các bản dịch mới với các bản dịch hiện có trong một bước duy nhất
• Giữ nguyên các bản dịch hiện có trong quá trình cập nhật
• Hỗ trợ nhiều ngôn ngữ mục tiêu

Tệp cấu hình

"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"]
      }
    }
  }
}

Chuẩn bị các thành phần cho việc dịch thuật

<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`;
}

Xây dựng và phục vụ

npm run build

ng build --configuration=fr

ng serve --configuration=fr