title: Ionic angular translate not working
body: <p>Im using ionic 2 and went through this document:</p>
  
  <pre><code>http://ionicframework.com/docs/resources/ng2-translate/
  </code></pre>
  
  <p>I made all the changes needed for translation to work. However, when I write this in an html file:</p>
  
  <pre><code>{{ 'HELLO' | translate }}   
  </code></pre>
  
  <p>In the page I see</p>
  
  <pre><code>HELLO   
  </code></pre>
  
  <p>This, even thought I have a file at /assets/i18n/en.json which contains:</p>
  
  <pre><code>{
      "HELLO": "Hello there"
  }
  </code></pre>
  
  <p>In app.ts I added these imports:</p>
  
  <pre><code>import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  import { Http } from '@angular/http';
  </code></pre>
  
  <p>And then after the imports I have this:</p>
  
  <pre><code>export function createTranslateLoader(http: Http) {
      return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }
  </code></pre>
  
  <p>And also this in @NgModule->import's array:</p>
  
  <pre><code>TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }
  })      
  </code></pre>
  
  <p>What I realized is that my app had since before this import:</p>
  
  <pre><code>import { HttpModule } from '@angular/http';
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>http: HttpModule
  </code></pre>
  
  <p>insead of the one in the documentation</p>
  
  <pre><code>http: Http
  </code></pre>
  
  <p>Can I see if the en.json has been loaded? Or what is the problem here?</p>