Im using ionic 2 and went through this document:

http://ionicframework.com/docs/resources/ng2-translate/

I made all the changes needed for translation to work. However, when I write this in an html file:

{{ 'HELLO' | translate }}   

In the page I see

HELLO   

This, even thought I have a file at /assets/i18n/en.json which contains:

{
    "HELLO": "Hello there"
}

In app.ts I added these imports:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Http } from '@angular/http';

And then after the imports I have this:

export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

And also this in @NgModule->import's array:

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [Http]
  }
})      

What I realized is that my app had since before this import:

import { HttpModule } from '@angular/http';

Im not sure why I imported that but if I remove it then the app breaks in other places. Is that the problem? Importing angular/http twice with two different names? Tried to only use the original one, but in the export function it doesn't like the argument

http: HttpModule

insead of the one in the documentation

http: Http

Can I see if the en.json has been loaded? Or what is the problem here?