Angular 2 Injectable Class not working when creating and initializing parameters
<p>I wanted to create a Class to share some common api data accross a sample app but I can't understand why one of the two below versions are not working:</p>

<p><strong>Version 1 [./apiKeys.ts] - working</strong></p>

<pre><code>import {Injectable} from '@angular/core';
@Injectable()
export class SomeApi{
  key: string;
  url: string;
  constructor(){
    this.key = 'API_KEY';
    this.url = 'API_URL';
  }
}
</code></pre>

<p><strong>Version 2 [./apiKeys.ts] - not working</strong></p>

<pre><code>import {Injectable} from '@angular/core';
@Injectable()
export class SomeApi{
  constructor(
    public key:string = 'API_KEY',
    public url:string = 'API_URL'
  ){}
}
</code></pre>

<p>I will then pass it as a provider at bootstrap</p>

<p><strong>./main.ts</strong></p>

<pre><code>import {SomeApi} from './apiKeys.ts'
bootstrap(AppComponent, [SomeApi])
</code></pre>

<p>But at startup I am getting the following error (considering <em>version 2</em>):</p>

<pre><code>ORIGINAL EXCEPTION: No provider for String! (SomeApi -&gt; String)
</code></pre>

<p><strong>Why is version 2 not working?</strong>
Thanks</p>

<hr>

<h2>EDIT</h2>

<p>After the suggestions from Günter Zöchbauer I had a look at some resources and found what I think is the best solution for my situation, here is what I did:</p>

<p><strong>./apiKeys.ts</strong></p>

<pre><code>import { OpaqueToken } from '@angular/core';

export interface AppConfig{
  key: string;
  url: string;
}

export const DI_CONFIG: AppConfig = {
  key: 'AIzaSyAjC3U-CbKYm_4sYV90XqJ_Upe8ID9jlxk',
  url: 'https://www.googleapis.com/youtube/v3/search'
}

export let APP_CONFIG = new OpaqueToken('app.config');
</code></pre>

<p><strong>./main.ts</strong></p>

<pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
import {DI_CONFIG, APP_CONFIG} from './apiKeys';

bootstrap(AppComponent, [{ provide: APP_CONFIG, useValue: DI_CONFIG }]);
</code></pre>

<p><strong>./apiService.ts</strong></p>

<pre><code>import {Injectable, Inject} from '@angular/core';
import {APP_CONFIG, AppConfig} from './apiKeys';

@Injectable()
export class ApiService{
  constructor(
    @Inject(APP_CONFIG) private config: AppConfig
  ){}
  // i can then use it with this.config.url - this.config.key
}
</code></pre>

<p><em>Sources:</em></p>

<ul>
<li><a href="https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#non-class-dependencies" rel="nofollow">https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#non-class-dependencies</a></li>
<li><a href="http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html" rel="nofollow">http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html</a></li>
</ul>