Angular 2 accessing REST API error -No provider for Http

Question

I'm developing a Angular 2 application to access REST API endpoints and show the data to users. I tested REST API endpoints in Postman and those are working well. When i'm accessing a GET endpoint from Angular i'm getting following error snippet.

Error: StaticInjectorError[Http]: 
StaticInjectorError[Http]: 
NullInjectorError: No provider for Http!
at _NullInjector.get (webpack-internal:///../../../core/esm5/core.js:1189)
at resolveToken (webpack-internal:///../../../core/esm5/core.js:1477)
at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1419)
at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1290)
at resolveToken (webpack-internal:///../../../core/esm5/core.js:1477)
at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1419)
at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1290)
at resolveNgModuleDep (webpack-internal:///../../../core/esm5/core.js:11074)
at NgModuleRef_.get (webpack-internal:///../../../core/esm5/core.js:12306)
at resolveDep (webpack-internal:///../../../core/esm5/core.js:12804)

Tried by importing both Http and HttpModule like this top of the code as well.

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

Following is my relevant code snippet for the get data function.

getData(){
    const url = 'http://localhost/laravel_app/public/api/getdata';
    this.http.get(url).subscribe(
      res => {
        const data = res.json();
        console.log(data);
        return data;
      }
    );
  }

You need to inject the HTTP Service – Ayush Gupta Jan 09 '18 at 05:07 — Ayush Gupta, Jan 09 '18 at 05:07

score 1 · Answer 1 · answered Jan 09 '18 at 05:25

You need to add this code into your app.module.ts file.

import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';

imports: [
   BrowserModule,
   HttpModule       
]

Actually http is used in angular 2 but now in latest version of angular it used HttpClient.

score 0 · Answer 2 · answered Jan 09 '18 at 05:08

0

If you are using angular v5 version, import HttpClientModule in your app.module.ts after HttpModule.

imports: [
    HttpModule,
    HttpClientModule
]

answered Jan 09 '18 at 05:08

Sajeetharan

216,225
63
350
396

Using Angular 2 version not v5 – CodeCanyon Jan 09 '18 at 05:21
what is the version – Sajeetharan Jan 09 '18 at 05:23
Angular version is 2 – CodeCanyon Jan 09 '18 at 05:25
post your app.module.ts – Sajeetharan Jan 09 '18 at 05:27

score 0 · Answer 3 · answered Jan 09 '18 at 05:13

0

you should import HttpModule in the module.ts file and the Http in the service where you are actually using it to make the api call.

Have a look here

answered Jan 09 '18 at 05:13

arbghl

358
2
14

There's no module.ts file. – CodeCanyon Jan 09 '18 at 05:19
I meant wherever you are defining you angular 2 module. may be app.module.ts – arbghl Jan 09 '18 at 05:22

ashishdudhat · Accepted Answer · 2018-01-09T05:22:02.947

-1

you can import this line app.module.ts

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

and write in

@NgModule({
   imports: [
    HttpModule,
   ]
 })

edited Jan 09 '18 at 05:22

answered Jan 09 '18 at 05:11

ashishdudhat

180
3
9

Did like this. Then i'm getting this error - Uncaught Error: Unexpected value 'Http' imported by the module 'AppModule'. Please add a @NgModule annotation. – CodeCanyon Jan 09 '18 at 05:20
Finally it works. I have imported both Http and HttpModule. No need to import both as you have mentioned. – CodeCanyon Jan 09 '18 at 05:30

Angular 2 accessing REST API error -No provider for Http

4 Answers4