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
– Ayush Gupta

2018-01-09 05:07:40 +00:00
Commented Jan 9, 2018 at 5:07 — Ayush Gupta
– Ayush Gupta, Commented Jan 9, 2018 at 5:07

Sachin Shah · Accepted Answer · 2018-01-09 05:25:28Z

1

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.

answered Jan 9, 2018 at 5:25

Sachin Shah

4,5634 gold badges26 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajeetharan · Accepted Answer · 2018-01-09 05:08:08Z

0

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

imports: [
    HttpModule,
    HttpClientModule
]

answered Jan 9, 2018 at 5:08

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

4 Comments

The Odd Developer Over a year ago

Using Angular 2 version not v5

Sajeetharan Over a year ago

what is the version

The Odd Developer Over a year ago

Angular version is 2

Sajeetharan Over a year ago

post your app.module.ts

arbghl · Accepted Answer · 2018-01-09 05:13:57Z

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 9, 2018 at 5:13

arbghl

3682 silver badges17 bronze badges

2 Comments

The Odd Developer Over a year ago

There's no module.ts file.

arbghl Over a year ago

I meant wherever you are defining you angular 2 module. may be app.module.ts

ashishdudhat · Accepted Answer · 2018-01-09 05:22:02Z

-1

you can import this line app.module.ts

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

and write in

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

edited Jan 9, 2018 at 5:22

answered Jan 9, 2018 at 5:11

ashishdudhat

1903 silver badges10 bronze badges

2 Comments

The Odd Developer Over a year ago

Did like this. Then i'm getting this error - Uncaught Error: Unexpected value 'Http' imported by the module 'AppModule'. Please add a @NgModule annotation.

The Odd Developer Over a year ago

Finally it works. I have imported both Http and HttpModule. No need to import both as you have mentioned.

Collectives™ on Stack Overflow

Angular 2 accessing REST API error -No provider for Http

4 Answers 4

Comments

4 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related