作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试按照 this 制作具有 ngx-translate 功能的 Angular 应用程序教程。
我执行了所有步骤,但出现错误:“异常:调用节点模块失败,出现错误:错误:没有 InjectionToken ORIGIN_URL 的提供者!at Error (native)”,我不知道还能尝试什么。
我的 app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { InjectionToken } from '@angular/core';
import { ORIGIN_URL } from './constants/baseurl.constants';
export function createTranslateLoader(http: Http, baseHref) {
// Temporary Azure hack
if (baseHref === null && typeof window !== 'undefined') {
baseHref = window.location.origin;
}
// i18n files are in `wwwroot/assets/`
return new TranslateHttpLoader(http, `${baseHref}/assets/i18n/`, '.json');
}
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent
],
imports: [
HttpModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http, [ORIGIN_URL]]
}
}),
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
};
我的 app.component.ts:
import { Component, Inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Http } from '@angular/http';
import { ORIGIN_URL } from '../../constants/baseurl.constants';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user = {
name: 'Arthur',
age: 42
};
constructor(private translate: TranslateService, private http: Http,
@Inject(ORIGIN_URL) private baseUrl: string) {
translate.setDefaultLang('ro');
}
switchLanguage(language: string) {
this.translate.use(language);
}
}
我的包.json
"name": "WebApplicationBasic",
"version": "0.0.0",
"dependencies": {
"@angular/animations": "4.1.2",
"@angular/common": "4.1.2",
"@angular/compiler": "4.1.2",
"@angular/core": "4.1.2",
"@angular/forms": "4.1.2",
"@angular/http": "4.1.2",
"@angular/platform-browser": "4.1.2",
"@angular/platform-browser-dynamic": "4.1.2",
"@angular/platform-server": "4.1.2",
"@angular/router": "4.1.2",
"@ngx-translate/core": "^7.1.0",
"@ngx-translate/http-loader": "^1.0.1",
"@types/node": "7.0.18",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^2.0.5",
"aspnet-webpack": "^1.0.29",
"awesome-typescript-loader": "3.1.3",
"bootstrap": "3.3.7",
"css": "2.2.1",
"css-loader": "0.28.1",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.0",
"file-loader": "0.11.1",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"npm": "^2.15.11",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.0",
"style-loader": "0.17.0",
"to-string-loader": "1.1.5",
"typescript": "2.3.2",
"url-loader": "0.5.8",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.0",
"webpack-merge": "4.1.0",
"zone.js": "0.8.10"
}
我错过了什么?
谢谢!
更新:
现在没有错误,但是 ngx-translate 不起作用。
为了
{{ 'ENGLISH' | translate }}
{{ 'NORWEGIAN' | translate }}
我分别在 html ENGLISH、NORWEGIAN 中获取,
翻译服务不工作。
我已经调试了 javascript 代码但没有结果...
最佳答案
我怀疑 ORIGIN_URL
已被用作依赖项,但似乎没有在 NgModule 的 providers
数组中注册。
imports: [
HttpModule,
//registered dependency with `ORIGIN_URL` name
{provide: 'ORIGIN_URL', useValue: ORIGIN_URL}
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http, 'ORIGIN_URL'] //passed dependency name in `deps`
}
}),
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
此外,在注入(inject)依赖项时,您还必须使用 'ORIGIN_URL'
(作为字符串)与 @Inject
的组合。
constructor(private translate: TranslateService, private http: Http,
@Inject('ORIGIN_URL') private baseUrl: string) {
translate.setDefaultLang('ro');
}
此外,您可以通过创建 OpaqueToken
来摆脱 @Inject('ORIGIN_URL')
部分为了你的依赖
shared/origin-url.service.ts
import { ORIGIN_URL as url } from '../../constants/baseurl.constants';
import { OpaqueToken } from '@angular/core'
export let ORIGIN_URL = new OpaqueToken('ORIGIN_URL');
//below is `InjectionToken` implementation
//export let API_URL = new InjectionToken<string>('ORIGIN_URL');
export const THIRDPARTYLIBPROVIDERS = { provide: ORIGIN_URL , useValue: url }
;
然后在 AppModule
的 NgModule
元数据中注册这个 ORIGIN_URL
import { THIRDPARTYLIBPROVIDERS , ORIGIN_URL } from './shared/origin-url.service'
imports: [
HttpModule,
THIRDPARTYLIBPROVIDERS, //<-- registered provider here
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [
Http,
new Inject(ORIGIN_URL), //remove this while using `InjectionToken`
//ORGIN_URL //<-- this will be with `InjectionToken`
] //passed dependency name in `deps`
}
}),
//...other imports
];
关于 Angular 错误 "No provider for InjectionToken ORIGIN_URL!",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45399171/
我是一名优秀的程序员,十分优秀!