Angular 4 Ngx-translate Rohr funktioniert nicht

Question

Ich möchte eine eckige 4 App, die multilangual ist. Ich habe die Antwort auf Angular 2 - Multilingual Support gefolgt, aber es funktioniert nicht.

Ich habe jeden Schritt gemacht, von 1 bis 5 auf dieser Seite und mein Appmodul sieht gleich aus.

Ich habe eine Datei en.json in einem Ordner i18n, in meinem Assets Ordner. Die Datei enthält

{ "TEST":"little test"} 

und in meinem HTML:

<a [routerLink]="['/home']" class="tile waves-effect waves-light btn-large"> 
    <span> {{ "TEST" | translate }}</span> 
</a> 

Und wenn ich es benutze ich bekommen TEST statt kleiner Test. Das ist wirklich nervig, weil ich mehrere Sprachen hinzufügen möchte.

bearbeiten
Ich habe diesen Code zu meinem appmodule.ts hinzugefügt (nur hinzugefügt erforderlich)

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, 
    ], 

Answer 1

Könnten Sie wie folgt versuchen?

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