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。