Angular error "No provider for InjectionToken ORIGIN_URL!"

Question

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...

Answer 1

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