title: App.settings - the Angular way?
body: <p>I want to add an <code>App Settings</code> section into my App where It will contain some consts and pre defined values.</p>
  
  <p>I've already read <a href="https://stackoverflow.com/a/40287063/859154"><em>this answer</em></a> which uses <code>OpaqueToken</code> But it is deprecated in Angular. This <a href="https://blog.thoughtram.io/angular/2016/05/23/opaque-tokens-in-angular-2.html" rel="noreferrer"><em>article</em></a> explains the differences but it didn't provide a full example  , and my attempts were unsuccessful.</p>
  
  <p>Here is what I've tried ( I don't know if it's the right way) : </p>
  
  <pre><code>//ServiceAppSettings.ts
  
  import {InjectionToken, OpaqueToken} from "@angular/core";
  
  const CONFIG = {
    apiUrl: 'http://my.api.com',
    theme: 'suicid-squad',
    title: 'My awesome app'
  };
  const FEATURE_ENABLED = true;
  const API_URL = new InjectionToken&lt;string&gt;('apiUrl');
  </code></pre>
  
  <p>And this is the component where I want to use those consts : </p>
  
  <pre><code>//MainPage.ts
  
  import {...} from '@angular/core'
  import {ServiceTest} from "./ServiceTest"
  
  @Component({
    selector: 'my-app',
    template: `
     &lt;span&gt;Hi&lt;/span&gt;
    ` ,  providers: [
      {
        provide: ServiceTest,
        useFactory: ( apiUrl) =&gt; {
          // create data service
        },
        deps: [
  
          new Inject(API_URL)
        ]
      }
    ]
  })
  export class MainPage {
  
  
  }
  </code></pre>
  
  <p>But it doesn't work and I get errors. </p>
  
  <p><strong>Question:</strong></p>
  
  <p>How can I consume "app.settings" values the Angular way?</p>
  
  <p><a href="https://plnkr.co/edit/2YMZk5mhP1B4jTgA37B8?p=preview" rel="noreferrer"><strong>plunker</strong></a></p>
  
  <p>NB Sure I can create Injectable service and put it in the provider of the NgModule , But as I said I want to do it with <code>InjectionToken</code> , the Angular way.</p>