No provider for Http! - Angular 4 + Rails 5 API - ruby-on-rails

Question

I have followed this tutorial, and am having trouble getting it going.
I am using Angular 4.2.4.
[Error] ERROR
Error: No provider for Http!
injectionError — core.es5.js:1169
...
View_AppComponent_Host_0 (AppComponent_Host.ngfactory.js:4)
...
As I understand it, a few things have changed with Angular since this tutorial was written, including the replacement of this:
import { Http } from '#angular/http';
with this:
import { HttpModule } from '#angular/http';
I have tried this and added HttpModule to the imports array in `app.module.ts.
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 { }
Any suggestions would be much appreciated.
Thanks!

Answer 1

You should import the Http provider from #angular/http inside your AppComponent, and add the HttpModule to the imports array of your AppModule:
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 { }