CODEWITHSUNDEEP
ruby-on-railsangulartypescript
simonlehmann
simonlehmann

Reputation: 882

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

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!

Upvotes: 1

Views: 197

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71911

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 { }

Upvotes: 3

Related Questions