Question

我正在尝试按照this教程制作一个具有ngx-translate功能的Angular应用。

我完成了所有步骤，但是我收到了错误：＆＃34;异常：调用节点模块失败并显示错误：错误：没有提供者注入FeedToken ORIGIN_URL！在错误（本机）＆＃34;我不知道还有什么可以尝试。

我的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')部分

<强>共享/原点-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 }
;

然后在ORIGIN_URL

的NgModule元数据中注册此AppModule

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
];

角度错误＆＃34;没有提供者注入FeedToken ORIGIN_URL！＆＃34;

1 个答案: