How to provide an alternative link to i18n language in Angular with aot compilation?

Question

I am currently working on i18n of my Angular application. I use AOT compilation with xlf files to create precompiled applications, as described here . In the assembly, I provide the href base base (using --base-hrefparm). For example, this means that I end up with two language applications using the following URLs:

• / APP_PATH / en / ...
• / APP_PATH / de / ...

Now I want to provide a link to the corresponding alternative language in my application, replacing, for example, enwith the dein the active URL. I used router injection, so I can access the url property, but this property does not give me the full URL, including base-href.

How to find out the base url from an Angular app?

Alternatively, is there a way to find out in which language the application was created? Is there any way to access the property of the target language from xliff files?

Answer 1

When you compile your application for different languages, you set the language standard during the ng build process:

./node_modules/.bin/ngc --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf

, :

import { Inject, LOCALE_ID } from '@angular/core';
...
constructor(@Inject(LOCALE_ID) locale: string, ...

locale . "es"

,

Answer 2

-, Angular Router Location ( , Router):

constructor(private router: Router, private location: Location) {}

, (base href):

let fullpath = this.location.prepareExternalUrl(this.location.path());
let basepath = fullpath.substr(0, fullpath.lastIndexOf(this.location.path().substr(1)));

, URL- ( urls):

const languages = ["en", "de", "fr", "it"];  // List of available languages 
let urls = [];
for (let lang of languages) {
  let url = basepath.replace(/\/(..)\/$/, "/" + lang + "/") + this.location.path().substr(1);
  if (url !== fullpath) {
    urls.push(url);
  }
}

, basepath.replace . - "en-us", . .