ngx-translate - 沒有提供InjectionToken DocumentToken

Question

我是離子3和角4的新手。我試圖翻譯頁面 ，但是當我運行應用程序時，出現此錯誤。我加入了圖書館和進口的一切，如文檔說，我加入應用程序模塊的供應商陣列中的翻譯服務，但我仍然得到這個錯誤

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

我還添加了文件夾，並在 「資產/ i18n中/」 2個JSON文件。
請需要幫助！

Answer 1

對於角度版本< 4.3需要安裝該版本http-loader@0.1.0的 HTTP裝載機

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

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

3）導入HTTP模塊和HTTP from @ angular/http

4）從@ ngx-translate/core導入TranslateModule，TranslateLoader，TranslateService

5）進口TranslateHttpLoader從@ NGX-翻譯/ HTTP裝載機

6）導出功能在app.module.ts與參數的Http

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

下面是在解決問題函數的參數，因爲我使用的是最新版本的http-loader，並且我打電話給httpClientModule & HttpClient，並且它與angular舊版本不兼容。

7）最後但並非最不重要的初始化對象的構造函數調用服務TranslateService

public constructor(public translate: TranslateService){ 

} 

8）最後，你可以使用這個對象，你在 視圖（HTML頁面初始化它的構造函數）像這樣：

{{'HOME.HELLO' | translate }} 

注：在JSON文件的字符串（鍵&值）必須全部帽italized。