Angular error "No provider for InjectionToken ORIGIN_URL!"
I am trying to create an Angular app with ngx-translate function by following this tutorial.
I did all the steps, but I get the error: "Exception: Call to Node module failed with error: Error: No InjectionToken ORIGIN_URL provider! In Error (native)" and I don't 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!
UPDATE:
Now there are no errors, but ngx-translate doesn't work.
For
{{ 'ENGLISH' | translate }}
{{ 'NORWEGIAN' | translate }}
I am getting in html ENGLISH, NORWEGIAN respectively,
the translation service is not working.
I was debugging javascript code with no results ...
source to share
I suspect that both was ORIGIN_URL
used as a Dependency, but doesn't seem to register with the providers
NgModule array .
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 must use 'ORIGIN_URL'
(as string) with combination @Inject
when injecting dependency.
constructor(private translate: TranslateService, private http: Http,
@Inject('ORIGIN_URL') private baseUrl: string) {
translate.setDefaultLang('ro');
}
Alternatively, you can get rid of the part @Inject('ORIGIN_URL')
by creating for your dependency OpaqueToken
common / 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 one ORIGIN_URL
inside the NgModule
metadataAppModule
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
];
source to share