角度错误“没有 InjectionToken ORIGIN_URL 的提供者！”

Question

我正在尝试按照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);
    }
}

我的 package.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 代码，但没有结果...

Answer 1

我怀疑 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' }
    ])
] 

在注入依赖项时，您还必须使用'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
];