角错误“"InjectionToken ORIGIN_URL没有提供者！" [英] Angular error "No provider for InjectionToken ORIGIN_URL!"

问题描述

我正在尝试通过遵循本教程.

我已完成所有步骤，但收到错误消息:异常:调用Node模块失败，并显示错误消息:Error:没有为InjectionToken ORIGIN_URL提供程序！ 出现错误(本机)"，我不知道还可以尝试其他什么方法.

我的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英语，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' }
    ])
] 

在注入依赖项时，还必须结合使用'ORIGIN_URL'(作为字符串)和@Inject.

constructor(private translate: TranslateService, private http: Http,
    @Inject('ORIGIN_URL') private baseUrl: string) {
    translate.setDefaultLang('ro');
}

---

此外，您可以通过创建@Inject('ORIGIN_URL')部分. rel ="nofollow noreferrer"> OpaqueToken 为您的依赖关系

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

I am trying to make an Angular app that has ngx-translate functionality by following this tutorial.

I did all the steps, but I am getting the error: "Exception: Call to Node module failed with error: Error: No provider for InjectionToken ORIGIN_URL! at Error (native)" and I no not know what else to try.

my 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' }
        ])
    ]
};

my 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);
    }
}

my 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"
  }

What am I missing?

Thank you!

---

UPDATE:

Now there are no errors, but the ngx-translate doesn't work.

For

{{ 'ENGLISH' | translate }}

{{ 'NORWEGIAN' | translate }}

I get in html ENGLISH, NORWEGIAN respectively,

the translate service doesn't work.

I have debugged the javascript code with no results...

解决方案

I suspect that as ORIGIN_URL has been used as Dependency, but doesn't seems to register in providers array of NgModule.

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

Also you have to use 'ORIGIN_URL'(as a string) with combination of @Inject while injecting dependency.

constructor(private translate: TranslateService, private http: Http,
    @Inject('ORIGIN_URL') private baseUrl: string) {
    translate.setDefaultLang('ro');
}

---

Furthermore you can get rid of @Inject('ORIGIN_URL') part by creating OpaqueToken for your dependency

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

Then register this ORIGIN_URL inside NgModule metadata of 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
];

这篇关于角错误“"InjectionToken ORIGIN_URL没有提供者！"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！