Angular Translate on Angular JS 2 and Ionic Framework 2

Yes, finally I made it work.

What were the main issues?

  1. I had a lot of peer dependencies errors while installing ng2-translate. Apparently, I can ignore them all.
  2. The right dependencies need to be loaded on your app.ts and page.ts for the plugin to work.

Things to take note of, we load the bulk of the initialisation and config of the ng2-translate plugin in the bootstrap file, aka the app.ts, which serves as the root of your app. In Ionic1, this would be the app.js

This file serves as the base structure upon which you will load the other components upon.

Remember to call the translate service in the constructor! I suppose I am only having this problem now because I am new to AngularJS 2. In future, this should come in as second nature.

Here are the two files that are needed to make this Ionic Framework 2 implementation of ng2-translate run.

Many thanks to Olivier Combe for creating the Angular JS 2 port @ https://github.com/ocombe/ng2-translate

But seriously, the code examples needed to be clearer and more ‘plug and play’.

It was missing import {Http} from '@angular/http'; in the bootstrap file, and it wasn’t clear how the bootstrap and the component files should look like, once installed correctly. But anyway, here you go.

app.ts

 

startup.ts

 

One Comment

Cancel

  1. Hi there! I think it is a good idea to try a localization management platform like https://poeditor.com that can help to easily manage your translations. The tool is compatible with .xmb and .xtb formats needed for Angular 2. Cheers!