title: Angular InjectionToken throws 'No provider for InjectionToken'
body: <p>I'm currently learning the new Angular framework, and I'm trying to make a dynamic search bar which accepts a service name as an argument in order for it to dynamically resolve a service to query the backend service with.</p>
  
  <p>For this I'm using an <code>Injector</code>, and loading the the service during <code>ngOnInit</code>. This works fine when using a string based provider, however my IDE notes that it's deprecated and I should use an <code>InjectionToken</code> which I can't seem to wrap my head around.</p>
  
  <p>I expected the following code to work, as removing all instances of <code>InjectionToken</code> and replacing them with the direct string literal works:</p>
  
  <p>I tried looking at the following documentation, but I didn't quite understand it as I feel like I did exactly what it says, yet it keeps telling me it doesn't work: <a href="https://angular.io/guide/dependency-injection-providers" rel="noreferrer">https://angular.io/guide/dependency-injection-providers</a></p>
  
  <p>Could someone tell me what I'm doing wrong?<br>
  Thanks</p>
  
  <p><strong>Module declaration</strong></p>
  
  <pre><code>// app.module.ts
  @NgModule({
    declarations: [
      AppComponent,
      SearchBarComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule,
      AppRoutingModule
    ],
    providers: [
      {
        provide: new InjectionToken&lt;ISearchable&gt;('CustomerService'), // &lt;-- doesn't work;  'CustomerService' &lt;-- works
        useValue: CustomerService
      }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>Search bar component:</strong></p>
  
  <pre><code>// search-bar.component.ts
  @Component({
    selector: 'search-bar',
    templateUrl: './search-bar.component.html',
    styleUrls: ['./search-bar.component.sass']
  })
  export class SearchBarComponent implements OnInit {
  
    @Input()
    source: string;
  
    private searcher: ISearchable;
  
    constructor(private injector: Injector) {}
  
    ngOnInit() {
      // error: Error: No provider for InjectionToken CustomerService!
      let token = new InjectionToken&lt;ISearchable&gt;(this.source);
      this.searcher = this.injector.get&lt;ISearchable&gt;(token);
  
      // this works, but it's deprecated and will probably break in the future
      // this.searcher = this.injector.get(this.source);
      console.log(this.searcher);
    }
  }
  </code></pre>
  
  <p><strong>Using the search bar:</strong></p>
  
  <pre><code>&lt;!-- app.component.html --&gt;
  &lt;div class="row justify-content-center mb-2"&gt;
    &lt;div class="col-8"&gt;
      &lt;search-bar title="Customers" source="CustomerService"&gt;&lt;/search-bar&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Edit: Here's an example with the error:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-3admbe" rel="noreferrer">https://stackblitz.com/edit/angular-3admbe</a></p>