DEV Community

Debmallya Bhattacharya
Debmallya Bhattacharya

Posted on • Updated on

Internationalization with Angular v10


To render and deploy our Angular app in 3 languages:

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


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">
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">
      <trans-unit id="profilePageTitle" datatype="html">
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/profile-settings/profile-settings.component.html</context>
          <context context-type="linenumber">4</context>
        <note priority="1" from="description"> A title for the Profile page </note>
        <note priority="1" from="meaning">Profile page title </note>

Enter fullscreen mode Exit fullscreen mode
  • Create a copy of this file and rename these 2 as :
    1. (for French translations)
    2. (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/",
          "es": "src/locale/"
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 :
        <!-- -->

        <!-- -->
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. (English)
    2. (French)
    3. (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'

  selector: 'app-switch-language',
  template: `
      <option *ngFor="let lang of languageList" [value]="lang.code">
        {{ lang.label }}
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
    if (!this.siteLanguage) {

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

Enter fullscreen mode Exit fullscreen mode


GitHub logo batbrain9392 / blueface-assignment

Angular app in 3 languages - English, French and Spanish


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.

Latest comments (0)