title: Angular 2 "No provider for String!"
body: <p>I'm trying to create a generalized data service in Angular 2, and I'm encountering a strange error. Essentially, I'm creating an HTTP service whose methods take in part of the api url so that I can use it for multiple cases. For example, I would like to pass in 'projects/' and join it with 'api/' to get 'api/projects/' which I could then use in the http calls.</p>
  
  <p>My current dataService.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers } from '@angular/http';
  import 'rxjs/add/operator/map'
  import { Observable } from 'rxjs/Observable';
  import { Configuration } from '../app.constants';
  
  @Injectable()
  export class DataService {
  
      private actionUrl: string;
      private headers: Headers;
  
      constructor(private _http: Http, private _configuration: Configuration, public action: string) {
  
      this.actionUrl = _configuration.ApiUrl
  
      this.headers = new Headers();
      this.headers.append('Content-Type', 'application/json');
      this.headers.append('Accept', 'application/json');
      }
  
      public GetAll (action: string): Observable&lt;any&gt; {
          return this._http.get(this.actionUrl + action).map((response: Response) =&gt; &lt;any&gt;response.json());
      }
  
      public GetSingle (action: string, id: number): Observable&lt;Response&gt; {
          return this._http.get(this.actionUrl + action + id).map(res =&gt; res.json());
      }
  
      public Add (action: string, itemToAdd: any): Observable&lt;Response&gt; {
          var toAdd = JSON.stringify(itemToAdd);
  
          return this._http.post(this.actionUrl + action, toAdd, { headers: this.headers }).map(res =&gt; res.json());
      }
  
      public Update (action: string, id: number, itemToUpdate: any): Observable&lt;Response&gt; {
          return this._http
          .put(this.actionUrl + id, JSON.stringify(itemToUpdate), { headers: this.headers })
          .map(res =&gt; res.json());
      }
  
      public Delete (action: string, id: number): Observable&lt;Response&gt; {
          return this._http.delete(this.actionUrl + id);
      }
  }
  </code></pre>
  
  <p>The component I'm trying to call GetAll with 'projects' as a parameter from: </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DataService } from '../services/dataService';
  
  @Component({
      selector: 'project-detail',
      templateUrl: 'app/project/project-detail.component.html'
  })
  export class ProjectDetailComponent implements OnInit{
      projects: Object[];
  
      constructor(private _dataService: DataService) {}
  
      getProjects(): void {
          this._dataService.GetAll('projects').subscribe(projects =&gt; this.projects = projects);
      }
      ngOnInit(): void {
          this.getProjects();
      }
  }
  </code></pre>
  
  <p>I do have the service added as a provider in my app.module.ts. One more thing of note is that the component I show here is a child component of a component called HomeComponent, which sits in AppComponent.</p>
  
  <p>This is what HomeComponent looks like:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ProjectDetailComponent } from '../project/project-detail.component';
  
  
  @Component({
      selector: 'home',
      templateUrl: '&lt;project-detail&gt;&lt;/project-detail&gt;'
  })
  
  export class HomeComponent {}
  </code></pre>
  
  <p>The error:</p>
  
  <pre><code>EXCEPTION: Uncaught (in promise): Error: Error in      app/home/home.component.html:2:0 caused by: No provider for String!
  </code></pre>
  
  <p>I know that it's complaining about the string I'm passing into GetCall, but I just don't know why.</p>
  
  <p>Any help would be appreciated!</p>