rails apiとangularを連結したい

###前提・実現したいこと
サーバーサイドをRails5でフロントエンドをAngular4でウェブアプリケーションを作成しようとしたら下記のエラーが発生しました。

###発生している問題・エラーメッセージ

AppComponent_Host.html:1 ERROR Error: No provider for Http!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9475)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557)
    at resolveDep (core.es5.js:11060)
    at createClass (core.es5.js:10913)
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ compiler.es5.js:14971
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:4409
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
(anonymous) @ core.es5.js:4409
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
(anonymous) @ zone.js:831
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
ZoneAwarePromise.then @ zone.js:918
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 
0 @ main.ts:11
__webpack_require__ @ bootstrap
webpackJsonpCallback @ bootstrap 
(anonymous) @ main.bundle.js:1
AppComponent_Host.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ compiler.es5.js:14971
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1085
(anonymous) @ core.es5.js:4409
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
(anonymous) @ core.es5.js:4409
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
(anonymous) @ zone.js:831
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
ZoneAwarePromise.then @ zone.js:918
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap
0 @ main.ts:11
__webpack_require__ @ bootstrap
webpackJsonpCallback @ bootstrap
(anonymous) @ main.bundle.js:1
zone.js:654 Unhandled Promise rejection: No provider for Http! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for Http!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9475)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557)
    at resolveDep (core.es5.js:11060)
    at createClass (core.es5.js:10913) Error: No provider for Http!
NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (http://localhost:4200/)

###該当のソースコード

js
1import { Component } from '@angular/core';
2import { Http } from '@Angular/http';
3@Component({
4  selector: 'app-root',
5  templateUrl: './app.component.html',
6  styleUrls: ['./app.component.css']
7})
8export class AppComponent {
9  title = 'app';
10  users; //追加
11
12  // 追加
13  constructor(private http: Http) {
14    http.get('http://localhost:3000/comments.json')
15      .subscribe(res => this.users = res.json());
16  }
17}

cors.rb
1 Rails.application.config.middleware.insert_before 0, Rack::Cors do
2  allow do
3    origins '*'
4
5    resource '*',
6      headers: :any,
7      methods: [:get, :post, :put, :patch, :delete, :options, :head]
8  end
9end

###試したこと
ここのサイト（http://qiita.com/kanadai/items/0034f0c0fe26efab2f2b）を参考に構築しております。

ご教授いいただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

そのQiitaのページでは不足があります。
エラーで「No provider for Http!」と出ているようですが、Httpを使うには src/app/app.module.ts にも記述を追加する必要があるのです。

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

import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http'; // 追加

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

投稿2017/08/14 08:20