Angular i18n : How to make language change using URL routing /Switcher Buttons?

Question

I am building a simple app to learn internationalisation using Angular 11. The tutorial I am following is: https://lokalise.com/blog/angular-i18n/

I followed the tutorial and tried to create an app with 2 configurations - an En (english) one and an Ru (russian). When I run the app with

ng serve --configuration=ru --open

I can see the russian translation

when I use:

ng serve

It shows me the English version of the app.

Both these configurations run in different ports. I tried to create a language switcher to be able to switch between the english and russian version of the app here is the code for that in

app.component.ts & app.component.html

import { Component } from '@angular/core';
import {registerLocaleData} from '@angular/common';
import localeRu from '@angular/common/locales/ru';

registerLocaleData(localeRu, 'ru');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    company = "Ash B.";
  created_by = $localize`Created by ${this.company}`
  today: number = Date.now();
   localesList = [
    { code: "en-US", label: 'English' },
    { code: "ru", label: 'Русский' }
  ];
  tasksCount = 201;
  genderCode = 0;

  // tslint:disable-next-line:typedef
  male() { this.genderCode = 0; }
  // tslint:disable-next-line:typedef
  female() { this.genderCode = 1; }
  // tslint:disable-next-line:typedef
  other() { this.genderCode = 2; }
}

<ul>
  <li *ngFor="let locale of localesList">
    <a href="/{{locale.code}}/">
      {{locale.label}}
    </a>
  </li>
</ul>

When I click on the buttons it changes the url from

localhost:4200/ru to localhost:4200/en-Us

but the content of the app is not translated. In order to see the translation I must run 2 different versions of the app. How can I make the language switch when I click on the buttons ?

Answer 1

to switch between versions you need to serve the build instead of serving the development configuration, each language will be compiled into a separate bundle, watch your dist folder after you run ng build --localize=true to make sure everything went ok.