Httpのプロバイダはありません！ - Angular 4 + Rails 5 API

Question

私はthis tutorialに従っており、問題を起こしています。

私は角度4.2.4を使用しています。これで

import { Http } from '@angular/http'; 

：：私が持っている

import { HttpModule } from '@angular/http'; 

私はそれを理解するように、このチュートリアルが書かれていたので、

[Error] ERROR 
Error: No provider for Http! 
injectionError — core.es5.js:1169 
... 
    View_AppComponent_Host_0 (AppComponent_Host.ngfactory.js:4) 
    ... 

は、いくつかのことは、このの交換を含む、角度を変更しましたこれを試して、HttpModuleを `app.module.tsのimports配列に追加しました。

app.component.ts

import { Component } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    title = 'app'; 
    books; 

    constructor(private http: Http) { 
    http.get('http://localhost:3000/books.json') 
     .subscribe(res => this.books = res.json()); 
    } 
} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

任意の提案をいただければ幸いです。

ありがとうございます！

Answer 1

あなたのAppComponent内@angular/httpからHttpプロバイダをインポートし、そしてあなたのAppModuleの輸入アレイにHttpModuleを追加する必要があります

AppComponent

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    title = 'app'; 
    books; 

    constructor(private http: Http) { 
    http.get('http://localhost:3000/books.json') 
     .subscribe(res => this.books = res.json()); 
    } 
} 

AppModule

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AppModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }