Kein Anbieter für Httpservice

Question

Wenn ich folgendes Projekt laufen bekomme ich den Fehler:

No provider for HttpService! (AppComponent -> HttpService)

Kann mir bitte jemand helfen?

mein AppComponent:

import {Component} from 'angular2/core'; 
import {HttpService} from "./htttp.service"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <div class="input"> 
    <label for="title">Title</label> 
    <input type="text" id="title" #title> 
    </div> 
    <div class="body"> 
    <label for="body">Body</label> 
    <input type="text" id="body" #body> 
    </div> 
    <div class="user-id"> 
    <label for="user-id">User ID</label> 
    <input type="text" id="user-id" #userid> 
    </div> 
    <button (click)="onPost(title.value, body.value, userid.value)">Post Data</button> 
    <button (click)="onGetPosts()">Get All Posts</button> 
    <p>Response: {{response | json}}</p> 
    </div>, 

    providers: [HttpService] 
     `, 
}) 
export class AppComponent { 
    response: string; 

    constructor(private _httpService: HttpService){} 
    onGetPosts(){ 
    this._httpService.getPosts().subscribe(
     response => this.response=response, 
     error => console.log(error) 
    ) 
    } 

} 

Httpservice:

import {Injectable} from 'angular2/core'; 
import {Http} from "angular2/http"; 
import {Observable} from "rxjs/Observable"; 
import 'rxjs/Rx'; 

@Injectable() 

export class HttpService{ 
    constructor(private _http:Http){} 

    getPosts():Observable<any>{ 
    return this._http.get('http://jsonplaceholder.typicode.com/posts').map(res => res.json()); 
    } 

} 

und boot.ts:

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from "./app.component"; 
import {HTTP_PROVIDERS} from "angular2/http"; 

bootstrap(AppComponent, [HTTP_PROVIDERS]); 

Wo liegt das Problem?

Answer 1

Es sollte

import {HttpService} from "./http.service"; 

Answer 2

Sie haben vergessen sein template wörtliche ‚zurück Zitat‘ zu schließen, bevor Sie Ihren Provider zu erklären.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <div class="input"> 
    <label for="title">Title</label> 
    <input type="text" id="title" #title> 
    </div> 
    <div class="body"> 
    <label for="body">Body</label> 
    <input type="text" id="body" #body> 
    </div> 
    <div class="user-id"> 
    <label for="user-id">User ID</label> 
    <input type="text" id="user-id" #userid> 
    </div> 
    <button (click)="onPost(title.value, body.value, userid.value)">Post Data</button> 
    <button (click)="onGetPosts()">Get All Posts</button> 
    <p>Response: {{response | json}}</p> 
    </div>`, 
    providers: [HttpService] 
})