A Multilanguage application with Angular Universal

How to create an Angular Universal application based on angular 7 with i18n support

In this Angular Universal tutorial I will discuss how I solved the internationalization problem , aka i18n , in my Angular Universal application.

If you don’t know Angular Universal, it’s a platform that make your application able to serve pre-rendered pages to users and web crawlers while the client-side app loads in the background. Then, once everything is ready client-side, it will seamlessly switch from showing the server-rendered pages to the regular client-side app.

A lot of tutorials online discuss how to convert your application to Angular Universal, in this one we will take a step forward and see how to create a multi-language Angular Universal application .

We will fulfill the i18n internationalization with angular cli tools and some improvements to the Angular Universal express server, the tutorial is based on 3 steps:

Add the i18n support for our app
Customize the build process for the translated apps
Modify the express server to handle languages

Reference repository

A working example of the angular universal project that we will use as reference is available at: https://github.com/mzuccaroli/universal-multisite-multilanguage , it is a simple Angular 7 project created for demo purposes. It is based on an angular universal starter , see https://github.com/angular/universal-starter if you want more info on a basic Angular Universal application.

Add the i18n support for our app

This step will set up the i18n environment for support translations in your app, run:

$npm install ngx-i18nsupport -s

now you can add i18n property in html tags like:

<h3 i18n>Hello interlanguage!</h3>

for English

<h3>Ciao!</h3>

for Italian and so on.

Now we want to make automatic the process of generating .xlf files, let’s add this configuration to our package.json

and add this to our script section

"extract-i18n": "ng xi18n --output-path locale && node ./node_modules/ngx-i18nsupport/dist/xliffmerge/xliffmerge"

now we will be able to run

$npm run extract-i18n

all the html files will be parsed and the translation files ( messages.xlf messages.en.xlf messages.fr.xlf messages.fr.xlf ) will be generated in the locale folder.

Now you can edit the xlf files and insert your translations .

Note that this key generation is incremental and, when new i18n tags will be added to our html, running this script again will update incrementally the translation files .

Customize the Build process

Note:this step is based on the angular.json file that is supported from Angular 6 + versions .

Let’s take a look to the angular.json file placed in the project root, go to the projects.yourProjectName.architect.build.configurations section: we can add here more configurations for language specific builds, for instance if you want to create a configuration for english build target you can change the outputPath to

“outputPath”: “dist/browser/en/”

and then add in the bottom of configuration

"baseHref": "/en/",
"i18nFile": "src/locale/messages.en.xlf",
"i18nFormat": "xlf",
i18nLocale": "en",
i18nMissingTranslation": "error"

In the fileReplacements section you can handle a specific environment for each translated application if needed.

A good idea is to add a mini configuration for develop target and handle a develop-dedicated environment.

The final result for an application in English Italian and French with a develop specific environment should be:

The json will became quite bigger but we will have full control of our builds and our final apps will be totally independent and language-optimizated , we could deploy a language specific app in a dedicated server/bucket/cdn without problems.

Now we need to add a script to our package.json to perform the language builds:

go to your package.json in “ scripts ” section and add:

"build:language-bundles": "ng run ng-universal-demo:build:production-it && ng run ng-universal-demo:build:production-en && ng run ng-universal-demo:build:production-fr",

then change the build:client-and-server-bundles script to create all the translated applications during the build:

"build:client-and-server-bundles": "npm run build:language-bundles && ng run ng-universal-demo:server:production",

now you can run your build:ssr command and see the “dist” folder with the three applications:

Modify the express server

For serve your universal application you need to modify the express server and make it able to handle the different languages . With this solution the server will identify the supported languages and pass the selected language and the request ip to the application, you can use the client ip to use external services (es: https://www.maxmind.com) to identify the user’s country by his ip and select the more appropriate language.

Go to your server.ts and find the “regular routes” part:

change it with:

now the server will recognize the language from the route and if it matches with supported languages will serve this specific app otherwise the “defaultlocale” application will be served.

Note that the language will be injected by the server and could be used by the application using:

@Inject(LOCALE_ID) public locale: string

in the same way you can detect the user ip , fetch his locale by an external service and serve his language specific application. Take a look this example that detect the user ip and inject it.

Take a look to the final result: