ngx-translate - Aucun fournisseur pour InjectionToken DocumentToken

Question

Je suis très nouveau à ionique 3 et angulaire 4. J'essaye de traduire une page mais quand j'exécute l'application j'obtiens cette erreur. J'ai ajouté les bibliothèques et tout importé que la documentation a dit, et j'ai ajouté le service dans le traduit tableau fournisseurs dans le module de l'application, mais je reçois toujours cette erreur

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 {} 

I dossier a également ajouté et 2 fichiers JSON dans "actifs/i18n /".
s'il vous plaît besoin d'aide !!

Answer 1

Pour la version angulaire < 4.3 nécessite l'installation de cette version http-loader@0.1.0 de http-loader

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

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

3) Importation HttpModule et Http à partir de @ angular/http

4) Importer TranslateModule, TranslateLoader, TranslateService de @ ngx-translate/core

5) Importation TranslateHttpLoader de @ NGX-translate/http-loader

6) Fonction d'exportation dans app.module.ts avec le paramètre Http

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

est ici ce qui résout le problème dans la paramètre de la fonction parce que j'utilisais la dernière version de http-loader, et j'appelle httpClientModule & HttpClient, et il n'est pas compatible avec l'ancienne version angulaire.

7) Dernier mais non le moindre initialiser l'objet dans le constructeur appelant le service TranslateService

public constructor(public translate: TranslateService){ 

} 

8) Enfin, vous pouvez utiliser cet objet que vous l'initialiser dans le constructeur dans la vue (page html) comme ceci:

{{'HOME.HELLO' | translate }} 

note: JSON fichier la chaîne (clé de valeur &) doit être tout bouchon italisé.