如何创建有角度的多语言路由路径

Question

I'm using the ngx-translate library to add multilingual support to my lazy loaded Angular website.
I was wondering how to properly add multilingual logics to the angular routing system.

Example

// HOME is my exported variable containing my routes
export const routes: Routes = [{
 path: HOME, 
 loadChildren: () => import('app/pages/home.module').then((m) => m.HomeModule),
}]

Now, when a user comes on my website, he should find the home pages with those URLs

• English : my-domain/home
• French : my-domain/acceuil
• German : my-domain/startseite

I know, I could create multiple app-routing.module.ts files, one for each language, but when the website have many pages and should be translated in many languages, it become overcomplicated to use this technique.

Edit

An other Idea was to reload the page, be even through this solution, I'll then have to change the url, what is also complicated in an nested routing system. like :

• English : my-domain/en/products/my-product
• French : my-domain/fr/produits/mon-produit

Answer 1

I'm guessing HOME is a constant.

What if you create a config object that gets initialized / updated when you change language, and it simply changes the values.. for example:

const PATHS = {
  en: {
    home: 'home',
  },
  fr: {
    home: 'acceuil',
  },
  it: {
    home: 'inizio',
  }
}

and then you just substitute HOME with PATHS[language].home , and language is whatever the language is set to, it could even be another property of your config object.

config = {
  currentLanguage: 'en',
  paths: {},
}

as long as it's available to all, it should be fine (create a root config.ts object, and export these variables, and modify them wherever imported as needed)

export const routes: Routes = [{
 path: config.path[config.currentLanguage].home, 
 loadChildren: () => import('app/pages/home.module').then((m) => m.HomeModule),
}]

you could even make this become more specialized by creating a function / generator that retrieves what you want particularly, but that's a little way too much for this example

Answer 2

First of all, here is the stackblitz of the working code

All the ideas presented in this answer are compiled together in the snippet (stackblitz) bellow:

https://stackblitz.com/edit/angular-ivy-bys583

About changing routes with no need to refresh

In order to change the routes without refreshing the page, you may access the list of routes in route.config and change the property path of the desired route.

Just to show how it works, see the simple example bellow, where the route /home is changed to /accueil , no need to refresh the app:

import { Router } from '@angular/router';

export class AppComponent {

  constructor(private router: Router){}

  changeHomeRoute(){
    for (let route of this.router.config){
      if (route.path == 'home'){
        route.path = 'accueil';
      }
    }
  }
}

Storing language in localStorage and setting default route on application start

Let´s work on a simple application that has three supported languages ( en , fr and de ) and only one component ( HomeComponent ).

First of all, as suggested by the OP, one option is to store the language in localStorage .

The paths of the routes may be stored in an const like that:

route-paths.ts

export const DEFAULT_LANGUAGE = "en";

export const ROUTE_PATHS = {
    de: {
        home: 'startseite'
    },
    en: {
        home: 'home'
    },
    fr: {
        home: 'accueil'
    }
};

During application first load the routes may be configured like that:

app-routing.module.ts

import { DEFAULT_LANGUAGE, ROUTE_PATHS } from './route-paths';

const routes: Routes = [
  {
    path: localStorage.getItem('lang') ? ROUTE_PATHS[localStorage.getItem('lang')]['home'] : ROUTE_PATHS[DEFAULT_LANGUAGE]['home'],
    component: HomeComponent
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Changing language triggers update in the routes and in the menu of the app

In the following code you can see examples of

• Changing the language in the <select> and updating the routes accordingly (see method onChangeLang() that changes the routes using route.config[i].path ).
• Automatically updating the menu links once the routes have changed (see the ngFor and the routes() method).

app.component.html

<div>
  Language:
  <select (change)="onChangeLang($event)">
    <option *ngFor="let lang of languagesAvailable" [value]="lang" [selected]="langSelected == lang">{{lang}}</option>
  </select>

  <div>
    <span>Menu:</span>
    <a *ngFor="let route of routes() | keyvalue" [routerLink]="['/' + route.value]">
      {{route.value}} 
    </a>
  </div>
</div>

<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { DEFAULT_LANGUAGE, ROUTE_PATHS } from './route-paths';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  languagesAvailable = ['de', 'en', 'fr'];
  
  langSelected = null;

  constructor(private router: Router){}

  ngOnInit(){
    this.langSelected = localStorage.getItem('lang');
    if (!this.langSelected){
      this.langSelected = DEFAULT_LANGUAGE;
      localStorage.setItem('lang', this.langSelected);
    }
  }

  onChangeLang(event){
    let previousLanguage = this.langSelected;
    let newLanguage = event.target.value;
    
    console.log('Routes before:');
    this.printRoutes();

    for (let route of this.router.config){
      for(let routeId in ROUTE_PATHS[previousLanguage]){
        let oldRoute = ROUTE_PATHS[previousLanguage][routeId];
        if (oldRoute == route.path){
          let newRoute = ROUTE_PATHS[newLanguage][routeId];
          console.log('old route for ' + routeId + ' is ' + route.path + '. Changing to ' + newRoute);
          route.path = ROUTE_PATHS[newLanguage][routeId];
        }
      }     
    };

    this.langSelected = newLanguage;
    localStorage.setItem('lang', this.langSelected);

    console.log('Routes after:');
    this.printRoutes();
  }

  routes(){
    return ROUTE_PATHS[this.langSelected];
  }

  printRoutes(){
    this.router.config.forEach(function(route, index, routes){
      console.log(route);        
    });
  }
}