ngx-translate - Kein Anbieter für InjectionToken DocumentToken

Question

Ich bin sehr neu zu ionic 3 und Angular 4. Ich versuche eine Seite zu übersetzen, aber wenn ich die App ausführen, bekomme ich diesen Fehler. Ich fügte hinzu, die Bibliotheken und importierte alles wie die Dokumentation gesagt, und ich fügte der Dienst in dem Provider-Array in App-Modul übersetzen, aber ich habe immer noch diesen Fehler

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { ErrorHandler, NgModule } from '@angular/core'; 
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; 
import {HttpClientModule, HttpClient} from '@angular/common/http'; 

import { MyApp } from './app.component'; 

import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 

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

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

@NgModule({ 
    declarations: [ 
    MyApp 
    ], 
    imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp), 
    HttpClientModule, 
    TranslateModule.forRoot({ 
     loader: { 
      provide: TranslateLoader, 
      useFactory: HttpLoaderFactory, 
      deps: [HttpClient] 
     } 
    }) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp 
    ], 
    providers: [ 
    StatusBar, 
    SplashScreen, 
    {provide: ErrorHandler, useClass: IonicErrorHandler}, 
    TranslateService 

    ] 
}) 
export class AppModule {} 

app.components.ts

import { Component, ViewChild,Inject, Injectable} from '@angular/core'; 
import { Nav, Platform} from 'ionic-angular'; 
import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 

import {TranslateService} from '@ngx-translate/core'; 

@Injectable() 
@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    @ViewChild("myNav") nav: Nav; 

    rootPage: any; 
    pages: Array<{title: string, component: any, icon: string}>; 

    constructor(public platform: Platform, 
       public statusBar: StatusBar, 
       public splashScreen: SplashScreen , 
       public translate: TranslateService) { 

    // this language will be used as a fallback when a translation isn't 
    // found in the current language 
    translate.setDefaultLang('en'); 
    translate.use('en'); 

    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     statusBar.styleDefault(); 
     splashScreen.hide(); 
    }); 
    } 

    switchLanguage(language: string){ 
    this.translate.use(language); 
    } 
} 

home.ts

import { Component } from '@angular/core'; 
import { NavController, NavParams, Platform } from 'ionic-angular'; 

@IonicPage() 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage{ 

constructor(public navCtrl: NavController, 
    private platform: Platform, 
    private navParams: NavParams){} 

} 

home.module.ts

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { HomePage} from './home'; 
@NgModule({ 
    declarations: [ 
    HomePage 
    ], 
    imports: [ 
    IonicPageModule.forChild(HomePage) 
    ], 
}) 
export class HomePageModule {} 

ich auch hinzugefügt Ordner und 2 json Dateien in "assets/i18n /".
bitte hilfe !!

Answer 1

Für abgewinkelte Ausführung < 4.3 erfordert diese Version http-loader@0.1.0 von http-loader

1) npm install @ngx-translate/http-loader@0.1.0 --save

2) npm install @ngx-translate/core --save

3) Import Installation Httpmodule und Http von @ angular/http

4) Importieren Sie TranslateModule, TranslateLoader, TranslateService von @ ngx-translate/core

5) Import TranslateHttpLoader von @ NGX-translate/http-loader

6) Exportfunktion in app.module.ts mit Parametern Http

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

Hier ist, was das Problem in der löst Funktionsparameter, weil ich die neueste Version von http-Loader verwendet habe, und ich rufe httpClientModule & HttpClient, und es ist nicht kompatibel mit eckigen alten Version.

7) Last but not least initialisieren Objekt im Konstruktor Aufruf den Service TranslateService

public constructor(public translate: TranslateService){ 

} 

8) Schließlich können Sie dieses Objekt verwenden, die Sie es in Konstruktor in der Ansicht (HTML-Seite initialisieren) wie folgt aus:

{{'HOME.HELLO' | translate }} 

Hinweis: In json den String (Schlüssel & Wert) Datei müssen alle Kappe sein italisiert.