internationalization and localization in angular 5

When we translate the angular app we have multiple choices to make before we dive in internationalization (i18n)process. First, we need to decide whether we choose built-in tools or third-party libraries. If we go with built-in tools for angular localization then we have a second decision to make: that we want to use Ahead-of-time(AOT) compiler or just-in-time(JIT) compiler. AOT helps in serving the application fast and the users are profited from the better performance. The decision that which language will be shown to users need to be rendered at serverside logic or by URL parameters. 

Angular localization with built-in i18n

Initially, we'll take a closer look at the built-in tools of angular. 

Setup

If we use AOT we need not set up anything for starting internalization in our app. The only way of testing different locales is that we need to start out the app with locale code as a parameter. Following is the example if we want to test german translation using locale code de:

ng serve --aot --locale de

But if we use JIT we need to define LOCALE_ID provider in our module: 

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
import { AppComponent } from '../src/app/app.component';
 
@NgModule({
      imports: [ BrowserModule ],
        declarations: [ AppComponent ]
        bootstrap: [ AppComponent ]
})
export class AppModule { }

This is the only thing we need  to start with our internationalization in our app by using built-in tools.

Extracting the unlocalized content

In angular, we are given a command that exports each and every content that has been marked with i18n attribute. We need to mark every content yourself. When it is done we can generate the file that will be including every source translation with following 

ng x18n

Automatically, it will generate the message.xlf file. With the help of this file, we can start translating content in multiple languages.

Translating The Content 

To translate the content the type of built-in compiler hardly matters. Both the options use the same syntax. 

<h1 i18n>My Headline<h1>

The I18n attribute takes care of the localization of content. We recommend you for adding ID for translation otherwise angular will generate the random ID

<h1 i18n="@@my_meaningful_id">My Headline<h1>

Use Of pluralization and placeholders in the content

By default, angular uses the ICU message format. With this format, we can implement every constellation of pluralization and placeholders we can imagine. Following is the example

<h1>Hello {{ name }}</h1>
<span i18n>
    Updated: {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{minute}} minute ago by {Gender, select, m {Male} f {Female} o {Other}}}}
</span>

First implies saying hello to a given name. The second helps in printing different content based on the value of minutes.

Angular localization with the help of ngx-translate

It is an internationalization library used in angular for closing the gap between missing features of built-in internalization functionalities

Setup

Install the library for setting it up 

npm install @ngx-translate/core --save

After installing we need to configure TranslateModule for the loading of i18n files where the translated content is located. 

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';
 
export function HttpLoaderFactory(http: HttpClient) {
        return new TranslateHttpLoader(http);
}
 
@NgModule({
        imports: [
                    BrowserModule,
                    HttpClientModule,
                    TranslateModule.forRoot({
                            loader: {
                                        provide: TranslateLoader,
                                        useFactory: HttpLoaderFactory,
                                        deps: [HttpClient]
                            }
                    })
            ],
            bootstrap: [AppComponent]
})
export class AppModule { }

It will load the translations from /assets/i18n/<locale-code>.json.<locae-code> is the placeholder for languages we provide. 

Next step for initializing translation service 

 export class AppComponent {
         param = {value: 'world'};
 
             constructor(translate: TranslateService) {
                 translate.setDefaultLang('en');
                 translate.use('en');
             }
 }

Now the app is ready for i18n. We can also use ngx-translate for working with AOT.

Conclusion 

For the localization, i18n, and ngx-translate it seems to be more feature complete and usable as built-in tools. Plugin of ngx-translate adds most of the missing feature like ICU message format and extract the content for an easy start.