Angular ngx translate-无InjectionToken DocumentToken的提供程序
我对爱奥尼亚3号和爱奥尼亚4号很陌生。我在试着翻译一页 但是当我运行这个应用程序时,我得到了这个错误。正如文档所说,我添加了库并导入了所有内容,并且在app模块中的providers数组中添加了translate服务,但仍然出现了这个错误 应用程序模块.tsAngular ngx translate-无InjectionToken DocumentToken的提供程序,angular,typescript,ionic3,ngx-translate,Angular,Typescript,Ionic3,Ngx Translate,我对爱奥尼亚3号和爱奥尼亚4号很陌生。我在试着翻译一页 但是当我运行这个应用程序时,我得到了这个错误。正如文档所说,我添加了库并导入了所有内容,并且在app模块中的providers数组中添加了translate服务,但仍然出现了这个错误 应用程序模块.ts import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; impo
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 {}
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);
}
}
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){}
}
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage} from './home';
@NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage)
],
})
export class HomePageModule {}
应用程序组件.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 {}
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);
}
}
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){}
}
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage} from './home';
@NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage)
],
})
export class HomePageModule {}
home.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 {}
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);
}
}
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){}
}
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文件请需要帮助 对于angular版本<4.3,需要安装此版本http-loader@0.1.0http加载程序的 1)
npm安装@ngx translate/http-loader@0.1.0--保存
2) npm安装@ngx translate/core——保存
3) 从@angular/Http导入HttpModule和Http
4) 从@ngx translate/core导入TranslateModule、TranslateLoader、TranslateService
5) 从@ngx translate/http加载程序导入TranslateHttpLoader
6) 使用参数Http导出app.module.ts中的函数
export function HttpLoaderFactory(http: Http) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}
以下是解决函数参数问题的方法,因为我使用的是最新版本的http loader,我调用了httpClientModule&HttpClient,它与旧版本不兼容
7) 调用服务的构造函数中最后但并非最不重要的初始化对象TranslateService
public constructor(public translate: TranslateService){
}
8) 最后,您可以使用这个对象,并在
按如下方式查看(html页面):
{{'HOME.HELLO' | translate }}
注意:在json文件中,字符串(键和值)必须全部大写。应用程序在没有ngx翻译的情况下工作吗?@AlexBeugnet yesDo您有最小的github repo来复制它吗?您使用的是什么版本?我可以从他们的官方文档中看到这一点:
,如果您仍在使用