Internationalization in Angular2

We all know that internationalization is important when it comes to bigger apps, or just the ones that are simply used across countries. Angular itself comes with very poor i18n support, which is why the community has built their own solutions to extend the framework’s functionalities to their needs. However, there’s finally a first-class solution evolving that will be baked right into the core.

I found a way to i18n my Angular2 project. For all those who’re having issues with i18n, this post will really will helpful. We are going to use ‘ng2-translate’ package to make this happen.

1. First install it with the following command :

   npm install ng2-translate --save

2. Then edit your systemjs configuration in index/default page as follows:

   packages: {
   "ng2-translate": {
   main: 'ng2-translate.js',
   defaultExtension: "js",
   map: {
   "ng2-translate": "./ng2-translate.js"
   }
   }
   },
   map: {
   "ng2-translate": "../../node_modules/ng2-translate" //it should be path of your ng2-translate package under node_modules, change it if require
   }
   

3. Don’t forget to add the required script for http communication (still in index.html):

4. Then in main component (app.component.ts in my case) import followings:

   import {HTTP_PROVIDERS, Http} from 'angular2/http';
   import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
   

5. Add providers and pipes in Component metadata:

   providers: [HTTP_PROVIDERS, TRANSLATE_PROVIDERS, provide(TranslateLoader, {
           useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
           deps: [Http]
       }),
       TranslateService],
       pipes: [TranslatePipe]

6. To get the locale of user and display translation based on that we need to changes our AppComponent (Main Component class) and add following code:

   param: string = "world";
   
       constructor(translate: TranslateService) {
           var userLang = navigator.language.split('-')[0]; // use navigator lang if available
           userLang = /(ru|en)/gi.test(userLang) ? userLang : 'en';
   
   		// this language will be used as a fallback when a translation isn't found in the current language
           translate.setDefaultLang('en');
   
   		// the lang to use, if the lang isn't available, it will use the current loader to get them
           translate.use(userLang);
       }

   Here “param” is a local variable use to add dynamically in the translated string.

7. Now create our resource file (JSON files) in ‘assets/i18n/’ folder at the root of application. Create ‘.json’ file like for English we will create ‘en.json’ file, for Russian create ‘ru.json’ file. Add resource as follows:

   {
       "HELLO": "Welcome to {{value}} of Angular2"
   }

8. Finally add following HTML code in your template or template file:

   {{ 'HELLO' | translate:{value: param} }}

9. Run your application and see the translated text accordingly.

That’s it 🙂 I hope it will help
Thanks for attention

You can visit my Github repository for sample application: Angular2Translate-Started