ngx-translate - InjectionToken DocumentToken 没有提供者 [英] ngx-translate - No provider for InjectionToken DocumentToken
问题描述
我对 ionic 3 和 Angular 4 非常陌生.我正在尝试翻译一个页面但是当我运行应用程序时，我得到了这个错误.我添加了库并按照文档所述导入了所有内容，并在 app 模块的 providers 数组中添加了翻译服务，但我仍然收到此错误
app.module.ts
import { BrowserModule } from '@angular/platform-browser';从'@angular/core'导入{ErrorHandler，NgModule}；从 'ionic-angular' 导入 { IonicApp, IonicErrorHandler, IonicModule }；从@angular/common/http"导入 {HttpClientModule, HttpClient}；从'./app.component'导入{MyApp}；从'@ionic-native/status-bar'导入{状态栏}；从@ionic-native/splash-screen"导入 { SplashScreen }；从@ngx-translate/core"导入 {TranslateModule、TranslateLoader、TranslateService}；从@ngx-translate/http-loader"导入 {TranslateHttpLoader}；导出函数 HttpLoaderFactory(http: HttpClient) {返回新的 TranslateHttpLoader(http, "./assets/i18n/", ".json");}@NgModule({声明:[我的应用],进口:[浏览器模块，IonicModule.forRoot(MyApp),HttpClient模块，TranslateModule.forRoot({装载机:{提供:TranslateLoader，useFactory: HttpLoaderFactory,部门:[HttpClient]}})],引导程序:[IonicApp]，入口组件:[我的应用],提供者:[状态栏，闪屏，{提供:ErrorHandler，useClass:IonicErrorHandler}，翻译服务]})导出类 AppModule {}app.components.ts
import { Component, ViewChild,Inject, Injectable} from '@angular/core';从离子角度"导入{导航，平台}；从'@ionic-native/status-bar'导入{状态栏}；从@ionic-native/splash-screen"导入 { SplashScreen }；从'@ngx-translate/core'导入{TranslateService}；@Injectable()@零件({模板网址:'app.html'})导出类 MyApp {@ViewChild("myNav") 导航:导航；根页:任何；pages: Array<{title: string, component: any, icon: string}>;构造函数(公共平台:平台，公共状态栏:状态栏，公共闪屏:闪屏，公共翻译:翻译服务){//当没有翻译时，此语言将用作后备//在当前语言中找到translate.setDefaultLang('en');translate.use('en');platform.ready().then(() => {//好的，平台已准备就绪，我们的插件可用.//在这里你可以做任何你可能需要的更高级别的原生事情.statusBar.styleDefault();splashScreen.hide();});}switchLanguage(语言:字符串){this.translate.use(语言);}}home.ts
从'@angular/core'导入{组件}；从离子角度"导入{ NavController，NavParams，平台}；@IonicPage()@零件({选择器:'page-home'，模板网址:'home.html'})导出类主页{构造函数(公共 navCtrl:NavController，私有平台:平台，私有导航参数:导航参数){}}home.module.ts
import { NgModule } from '@angular/core';从离子角"导入{ IonicPageModule }；从'./home'导入{ HomePage}；@NgModule({声明:[主页],进口:[IonicPageModule.forChild(主页)],})导出类 HomePageModule {}我还在assets/i18n/"中添加了文件夹和 2 个 json 文件.
请需要帮助！！
对于angular版本
1) npm install @ngx-translate/http-loader@0.1.0 --save
2) npm install @ngx-translate/core --save
3) 从 @angular/http 导入 HttpModule 和 Http
4) 从@ngx-translate/core 导入 TranslateModule、TranslateLoader、TranslateService
5) 从@ngx-translate/http-loader 导入 TranslateHttpLoader
6) app.module.ts 中的导出函数，参数为 Http
导出函数 HttpLoaderFactory(http: Http) {返回新的 TranslateHttpLoader(http, "./assets/i18n/", ".json");}这是解决函数参数问题的方法，因为我使用的是最新版本的 http-loader，我调用 httpClientModule &HttpClient，和angular老版本不兼容.
7) 在构造函数中调用服务TranslateService
的最后但并非最不重要的初始化对象公共构造函数(公共翻译:TranslateService){}8) 最后你可以使用这个在构造函数中初始化的对象像这样查看(html页面):
{{'HOME.HELLO' |翻译 }}注意:在json文件中，字符串(key & value)必须全部大写.
I'm very new to ionic 3 and Angular 4. I'm trying to translate a page but 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 {}
I also added folder and 2 json files in "assets/i18n/".
please need help !!
For angular version < 4.3 requires installing this version http-loader@0.1.0 of http-loader
1) npm install @ngx-translate/http-loader@0.1.0 --save
2) npm install @ngx-translate/core --save
3) Import HttpModule and Http from @angular/http
4) Import TranslateModule, TranslateLoader, TranslateService from @ngx-translate/core
5) Import TranslateHttpLoader from @ngx-translate/http-loader
6) Export function in app.module.ts with parameter Http
export function HttpLoaderFactory(http: Http) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}
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) Last but not the least initialize object in constructor calling the service TranslateService
public constructor(public translate: TranslateService){
}
8) Finally you can use this object which you initialize it in constructor in the view(html page) like this:
{{'HOME.HELLO' | translate }}
Note: In json file the string (key & value) must be all capitalized.
这篇关于ngx-translate - InjectionToken DocumentToken 没有提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
