title: Angular error "No provider for InjectionToken ORIGIN_URL!"
body: <p>I am trying to make an Angular app that has ngx-translate functionality by following <a href="https://medium.com/letsboot/translate-angular-4-apps-with-ngx-translate-83302fb6c10d" rel="noreferrer">this</a> tutorial.</p>
  
  <p>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.</p>
  
  <p>my app.module.ts</p>
  
  <pre><code>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 &amp;&amp; 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' }
          ])
      ]
  };
  </code></pre>
  
  <p>my app.component.ts:</p>
  
  <pre><code>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);
      }
  }
  </code></pre>
  
  <p>my package.json</p>
  
  <pre><code>"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"
    }
  </code></pre>
  
  <p>What am I missing?</p>
  
  <p>Thank you!</p>
  
  <hr>
  
  <p>UPDATE:</p>
  
  <p>Now there are no errors, but the ngx-translate doesn't work.</p>
  
  <p>For </p>
  
  <pre><code>{{ 'ENGLISH' | translate }}
  
  {{ 'NORWEGIAN' | translate }}
  </code></pre>
  
  <p>I get in html ENGLISH, NORWEGIAN respectively,</p>
  
  <p>the translate service doesn't work.</p>
  
  <p>I have debugged the javascript code with no results...</p>