title: Angular 4 Ngx-translate pipe not working
body: <p>I want to make an angular 4 app that is multilangual.
  I have followed the answer on <a href="https://stackoverflow.com/questions/35479739/angular-2-multilingual-support/40419709?noredirect=1#comment78043328_40419709">Angular 2 - Multilingual Support</a>
  but it doesn't work.</p>
  
  <p>I did every step, from 1 to 5 on that page and my appmodule looks the same.</p>
  
  <p>I have a file en.json in a folder i18n, located in my assets folder.
  The file contains</p>
  
  <pre><code>{ "TEST":"little test"}
  </code></pre>
  
  <p>and in my HTML:</p>
  
  <pre><code> &lt;a [routerLink]="['/home']" class="tile waves-effect waves-light btn-large"&gt;
    &lt;span&gt; {{ "TEST" | translate }}&lt;/span&gt;
   &lt;/a&gt;
  </code></pre>
  
  <p>And when I use it I get TEST instead of little test.
  This is really annoying because I want to add multiple languages.</p>
  
  <p><strong>edit</strong><br>
  I've added this code to my appmodule.ts (only necessary added)</p>
  
  <pre><code>import {HttpClientModule, HttpClient} from '@angular/common/http';
  import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
  import {TranslateHttpLoader} from '@ngx-translate/http-loader';
  
  export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
  }
  
  @NgModule({
    imports: [
      BrowserModule,
      HttpModule,
      HttpClientModule,
      MaterializeModule.forRoot(),
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      }),
      FormsModule,
      JsonpModule,
      routing,
      BrowserAnimationsModule,
    ],
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YCe52.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YCe52.png" alt="ProjectStructure"></a></p>