Clash Royale CLAN TAG#URR8PPP

i18n for Angular 6 using angular cli

I've been reading Angular documentation for i18n using the ng tool xi18n. It looks like an impressive tool but I didn't get the following line.

xi18n

When you internationalize with the AOT compiler, you must pre-build a
separate application package for each language and serve the
appropriate package based on either server-side language detection or
url parameters.

does it mean I need to build 100 apps & do the serve depending on the detection I do on server side?

Question is,

Is it even possible in production scenarios?

1 Answer
1

we have an app on the prod in 2 languages fr and en, you have to build your app for each language and with different base url, in my case i've added in my package.json

"scripts":
...
"build-i18n:fr": "ng build --output-path=dist/fr --aot -prod --bh /fr/ --i18n-file=src/locale/messages.fr.xlf --i18n-format=xlf --locale=fr",
"build-i18n:en": "ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=src/locale/messages.en.xlf --i18n-format=xlf --locale=en",
"build-i18n:default": "ng build --output-path=dist/en --aot -prod --bh /en/",
"build-i18n": "npm run build-i18n:default && npm run build-i18n:fr"
,


after that you have to add your web server config to serve these 2 apps, each one in subdirectory:

https://www.yourapp.com/en/
https://www.yourapp.com/fr/


here is an example for IIS

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<directoryBrowse enabled="true" />
<rewrite>
<rules>
<rule name="Imported Rule 1" stopProcessing="true">
<match url="^../index.html$" ignoreCase="false" />
<action type="None" />
</rule>
<rule name="Imported Rule 2" stopProcessing="true">
<match url="(..)" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="REQUEST_FILENAME" matchType="IsFile" ignoreCase="false" negate="true" />
<add input="REQUEST_FILENAME" matchType="IsDirectory" ignoreCase="false" negate="true" />
</conditions>
<action type="Rewrite" url="R:1/index.html" />
</rule>
<rule name="Imported Rule 3">
<match url="^$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="HTTP_ACCEPT_LANGUAGE" pattern="^fr" />
</conditions>
<action type="Redirect" url="/fr/" redirectType="Found" />
</rule>
<rule name="Imported Rule 5">
<match url="^$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="HTTP_ACCEPT_LANGUAGE" pattern="^es" negate="true" />
</conditions>
<action type="Redirect" url="/en/" redirectType="Found" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>


you have to add some code to manage navigation between the 2 apps in your language switch component. you get the current url and then redirect

<ul class="dropdown-menu" *ngIf="!isDev">
<li *ngFor="let language of languages;let i=index" >
<a id="TopNavLinkLanguageName i" href="/language.lang/#getCurrentRoute()" (click)="changeLanguage(language.lang)">
<img [src]="..." alt="flg" />
</a>
</li>
</ul>


your ts file

getCurrentRoute()
return this.router.url;

changeLanguage(lang: string)
const langs = ['en', 'fr'];
this.languages = this.allLanguages.filter((language) =>
return language.lang !== lang;
);
this.curentLanguage = this.allLanguages[langs.indexOf(lang)].name
localStorage.setItem('Language', lang);
if (isDevMode())
location.reload(true);




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.