DEV Community

Debmallya Bhattacharya
Debmallya Bhattacharya

Posted on • Updated on

Internationalization with Angular v10

#angular #i18n #internationalization

Goal

To render and deploy our Angular app in 3 languages:

  1. English (will be generated by default, no setup required)
  2. French
  3. Spanish

Setup

Assuming that you already have an Angular project, follow these steps:

  • Add localisation package with ng add @angular/localize
  • Add the following scripts to package.json : 
  "scripts": {
    ...
    "start": "ng serve",
    "build": "ng build --prod",
    "extract": "ng xi18n --output-path=src/locale",
    "start:fr": "npm start -- --configuration=fr --port 4201",
    "start:es": "npm start -- --configuration=es --port 4202",
    "build:i18n": "npm run build -- --localize"
  },
Enter fullscreen mode Exit fullscreen mode
  • Add the i18n attribute with [title] | [description] @@[tag] to all hardcoded strings which you'd like to be translated, like this : 
  <h1 i18n="Profile page title | A title for the Profile page @@profilePageTitle">
    Profile
  </h1>
Enter fullscreen mode Exit fullscreen mode
  • Run npm run extract to extract the language translation file at src/locale/messages.xlf. It will look like this : 
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="profilePageTitle" datatype="html">
        <source>Profile</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/profile-settings/profile-settings.component.html</context>
          <context context-type="linenumber">4</context>
        </context-group>
        <note priority="1" from="description"> A title for the Profile page </note>
        <note priority="1" from="meaning">Profile page title </note>
      </trans-unit>
    </body>
  </file>
</xliff>
Enter fullscreen mode Exit fullscreen mode
  • Create a copy of this file and rename these 2 as :
    1. messages.fr.xlf (for French translations)
    2. messages.es.xlf (for Spanish translations)
  • Modify the projects section angular.json in the following way to build and serve the different language builds: 
  "projects": {
    "<your-project-name>": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            ...
            "fr": {
              "localize": ["fr"]
            },
            "es": {
              "localize": ["es"]
            }
          }
        },
        "serve": {
          ...
          "configurations": {
            ...
            "fr": {
              "browserTarget": "<your-project-name>:build:fr"
            },
            "es": {
              "browserTarget": "<your-project-name>:build:es"
            }
          }
        },
        ...
      },
      "i18n": {
        "locales": {
          "fr": "src/locale/messages.fr.xlf",
          "es": "src/locale/messages.es.xlf"
        }
      }
    }
  },
Enter fullscreen mode Exit fullscreen mode
  • Add translations of the targeted word "Profile" in the translation files in their respective languages with the <target> tag : 
        <!-- messages.fr.xlf -->
        <source>Profile</source>
        <target>Profil</target>

        <!-- messages.es.xlf -->
        <source>Profile</source>
        <target>Perfil</target>
Enter fullscreen mode Exit fullscreen mode
  • Check if the translations are working by running
    1. npm run start or ng serve for English (default)
    2. npm run start:fr or ng serve -c=fr for French
    3. npm run start:es or ng serve -c=es for Spanish
  • Build the app for all languages by running npm run build:i18n or ng build --prod --localize. It will create 3 build folders under dist/<your-project-name> :
    1. en-US
    2. fr
    3. es
  • Deploy folder dist/<your-project-name> to any static hosting services (like Firebase). Your sites will be available at
    1. https://your.site/en-US/ (English)
    2. https://your.site/fr/ (French)
    3. https://your.site/es/ (Spanish)

Switch between the sites from inside the app

Create a switch-language component with a dropdown listing all the languages offered. On selection of any language, redirect the user to the corresponding site.
Additionally, hide the component if you're in development mode.

import { Component, OnInit, isDevMode } from '@angular/core'

@Component({
  selector: 'app-switch-language',
  template: `
    <select
      *ngIf="!isDev"
      [(ngModel)]="siteLocale"
      #language
      (change)="onChange(language.value)"
    >
      <option *ngFor="let lang of languageList" [value]="lang.code">
        {{ lang.label }}
      </option>
    </select>
  `,
})
export class SwitchLanguageComponent implements OnInit {
  isDev = isDevMode()
  siteLanguage: string
  siteLocale: string
  languageList = [
    { code: 'en-US', label: 'English' },
    { code: 'fr', label: 'French' },
    { code: 'es', label: 'Spanish' },
  ]

  ngOnInit() {
    this.siteLocale = window.location.pathname.split('/')[1]
    this.siteLanguage = this.languageList.find(
      (f) => f.code === this.siteLocale
    )?.label
    if (!this.siteLanguage) {
      this.onChange(this.languageList[0].code)
    }
  }

  onChange(selectedLangCode: string) {
    window.location.href = `/${selectedLangCode}`
  }
}
Enter fullscreen mode Exit fullscreen mode

Repository

GitHub logo batbrain9392 / blueface-assignment

Angular app in 3 languages - English, French and Spanish

CICD

BluefaceAssignment (ng 10.0.0)

The problem statement is in ProblemStatement.pdf. Sites are available here - English, French, Spanish.

Documentaion of how to achieve internationalization in Angular 10 is available here.

View on GitHub

Top comments (0)

Read next

sudhakar_george_e6d1f136f profile image

Integrating Stencil Web Components in Angular Project

Sudhakar George -

judith677 profile image

#89 — Calculate Proportion Using the Aggregation Values of the Data from the Same Group

Judith-Excel-Sharing -

shahzaib profile image

Handling Errors and Job Lifecycles in Rails 7.1: Master ActiveJob with `retry_on`, `discard_on`, and `after_discard`

Shah Zaib -

fernilo profile image

MyISAM VS InnoDB

Fernilo -