ngx-translate-没有InjectionToken DocumentToken的提供者

问题描述

我对ionic 3和Angular 4还是很陌生.我正在尝试翻译一个页面但是当我运行该应用程序时，出现此错误.我按照文档中的说明添加了库并导入了所有内容，并在应用程序模块的providers数组中添加了翻译服务，但仍然出现此错误

I'm very new to ionic 3 and Angular 4. I'm trying to translate a pagebut when I run the app I get this error. I added the libraries and imported everything as the documentation said, and I added the translate service in the providers array in app module, but I still get this error

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

我还在"assets/i18n/"中添加了文件夹和2个json文件.
请需要帮助！！

I also added folder and 2 json files in "assets/i18n/".
please need help !!

推荐答案

对于有角度版本< 4.3需要安装此版本 [email protected] 的http-loader

For angular version < 4.3 requires installing this version [email protected] of http-loader

1)npm install @ngx-translate/[email protected] --save

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

3)从@ angular/http导入HttpModule和Http

3) Import HttpModule and Http from @angular/http

4)从@ ngx-translate/core导入TranslateModule，TranslateLoader，TranslateService

4) Import TranslateModule, TranslateLoader, TranslateService from @ngx-translate/core

5)从@ ngx-translate/http-loader导入TranslateHttpLoader

5) Import TranslateHttpLoader from @ngx-translate/http-loader

6)在 app.module.ts 中使用参数Http

6) Export function in app.module.ts with parameter Http

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

这是解决函数参数问题的原因，因为我使用的是最新版本的http-loader，因此我将其称为httpClientModule& HttpClient，它与旧版本不兼容.

Here's what solves the issue in the function's parameter because I was using the latest version of http-loader, and I call httpClientModule & HttpClient, and it is not compatible with angular old version.

7)构造函数中调用服务 TranslateService

7) Last but not the least initialize object in constructor calling the service TranslateService

public constructor(public translate: TranslateService){

}

8)最后，您可以使用此对象，并在构造函数中将其初始化 像这样查看(html页面):

8) Finally you can use this object which you initialize it in constructor in the view(html page) like this:

 {{'HOME.HELLO' | translate }}

注意::在json文件中，字符串(键和值)必须全部大写.

Note: In json file the string (key & value) must be all capitalized.

这篇关于ngx-translate-没有InjectionToken DocumentToken的提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！