Angular i18n Test

This project is intended to show how to generate an Angular app with multiple languages (i18n = internalization).

Instructions

Run ng add @angular/localize;
Configure the HTML templates with the i18n attribute in desired tags;

Instructions;

Run ng extract-i18n;
Run ng extract-i18n --output-path src/locale --out-file source.xlf --format=xlf;
Rename the generated translation file with the following format: source.<locale-id>.xlf;

Examples of <locale-id>: en-US, pt-BR, fr-CA;

Translate the generated translation file;

Add the locales reference in angular.json file:

"projects": {
    "<project-name>": {
      // ...
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "pt-BR": "src/locale/source.pt-BR.xlf"
          // ...
        }
      }
      // ...
    }
    // ...
  },
  "defaultProject": "<project-name>"
}

Set localize option as true in angular.json file:

"build": {
  // ...
  "options": {
    "localize": true,
    // ...
  }
}

Apply specific build options in angular.json file, similar to the example below:

"build": {
    // ...
    "configurations": {
      // ...
      "en-US": {
        "localize": [
          "en-US"
        ]
      },
      "pt-BR": {
        "localize": [
          "pt-BR"
        ]
      }
    },
    // ...
  },
  "serve": {
    // ...
    "configurations": {
      // ...
      "en-US": {
        "browserTarget": "angular-i18n-test:build:en-US"
      },
      "pt-BR": {
        "browserTarget": "angular-i18n-test:build:pt-BR"
      }
    },
    // ...
  },
  // ...
}

Run ng build.

Note: Run ng serve --configuration=<locale> for development server now, replace <locale> with the desired locale. Example of running the development server for multiple locales:

ng serve --configuration=en-US --port 4200 --open;
ng serve --configuration=pt-BR --port 4201 --open.

Check the complete documentation for more details.

jv-amorim/angular-i18n-test

Angular i18n Test

Instructions