Angular EXCEPTION: No provider for Http

Question

I am getting the EXCEPTION: No provider for Http! in my Angular app. What am I doing wrong?

import {Http, Headers} from 'angular2/http';
import {Injectable} from 'angular2/core'


@Component({
    selector: 'greetings-ac-app2',
    providers: [],
    templateUrl: 'app/greetings-ac2.html',
    directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
    pipes: []
})
export class GreetingsAcApp2 {
    private str:any;

    constructor(http: Http) {

        this.str = {str:'test'};

        http.post('http://localhost:18937/account/registeruiduser/',
            JSON.stringify(this.str),
            {
                headers: new Headers({
                    'Content-Type': 'application/json'
                })
            });

It'd be nice if one of the answers actually explained why we need to import HttpModule, and what it does. — Drazen Bjelovuk
– Drazen Bjelovuk, Commented Jun 13, 2017 at 18:46

Edric · Accepted Answer · 2020-04-24 07:52:39Z

528

Import the HttpModule

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

Ideally, you split up this code in two separate files. For further information read:

edited Apr 24, 2020 at 7:52

Edric

27.2k13 gold badges88 silver badges97 bronze badges

answered Jan 3, 2016 at 14:09

Philip

24.4k2 gold badges33 silver badges31 bronze badges

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

6 Comments

d135-1r43 Over a year ago

In current Angular2 beta the file is called app.ts.

filoxo Over a year ago

In angular-cli generated projects, the file is called main.ts.

iRaS Over a year ago

what if I don't have a NgModule? I'm developing an angular2 module and it does not have a NgModule but for tests I need Http provider

Philip Over a year ago

@Webruster I just checked. It should still work. Can you give me the exact error code?

shaan gola Over a year ago

@PhilipMiglinci ...thanks for the valuable answer .. adding some points for the seekers that the file would be app.module.ts in angular 2.0 for explanation this is the core file for the project to include the modules which will use further inherited classes.

|

Günter Zöchbauer · Accepted Answer · 2018-01-25 11:01:30Z

57

>= Angular 4.3

for the introduced HttpClientModule

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // if used
    HttpClientModule,
    JsonpModule // if used
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular2 >= RC.5

Import HttpModule to the module where you use it (here for example the AppModule:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // if used
    HttpModule,
    JsonpModule // if used
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Importing the HttpModule is quite similar to adding HTTP_PROVIDERS in previous version.

edited Jan 25, 2018 at 11:01

answered Aug 30, 2016 at 9:07

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Comments

Caleb · Accepted Answer · 2016-09-17 22:17:21Z

9

With the Sept 14, 2016 Angular 2.0.0 release, you are using still using HttpModule. Your main app.module.ts would look something like this:

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

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

Then in your app.ts you can bootstrap as such:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/main/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

answered Sep 17, 2016 at 22:17

Caleb

2,2982 gold badges17 silver badges16 bronze badges

Comments

Surendra Babu Parchuru · Accepted Answer · 2017-08-19 13:37:25Z

9

Add HttpModule to imports array in app.module.ts file before you use it.

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

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

answered Aug 19, 2017 at 13:37

Surendra Babu Parchuru

1,0101 gold badge12 silver badges18 bronze badges

Comments

C.OG · Accepted Answer · 2019-12-27 14:34:30Z

9

Since rc.5 you have to do something like

@NgModule({
    imports: [ BrowserModule],
    providers: [ HTTP_PROVIDERS ],  
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export default class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

edited Dec 27, 2019 at 14:34

C.OG

6,5373 gold badges24 silver badges41 bronze badges

answered Aug 23, 2016 at 13:28

Adrian Ber

21.5k12 gold badges72 silver badges122 bronze badges

Comments

daniel · Accepted Answer · 2015-11-27 11:21:46Z

6

because it was only in the comment section I repeat the answer from Eric:

I had to include HTTP_PROVIDERS

answered Nov 27, 2015 at 11:21

daniel

35.9k40 gold badges108 silver badges164 bronze badges

1 Comment

Mike Gledhill Over a year ago

... Plus, HTTP_PROVIDERS has been depreciated. It's now called HttpModule.. stackoverflow.com/questions/38903607/…

Mwiza · Accepted Answer · 2017-07-25 01:24:00Z

5

Import HttpModule in your app.module.ts file.

import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';

Also remember to declare HttpModule under imports like below:

imports: [
    BrowserModule,
    HttpModule
  ],

edited Jul 25, 2017 at 1:24

Mwiza

9,3693 gold badges54 silver badges44 bronze badges

answered Jun 1, 2017 at 6:54

poo arasan

611 silver badge6 bronze badges

Comments

Shivang Gupta · Accepted Answer · 2016-09-25 15:19:47Z

4

The best way is to change your component's decorator by adding Http in providers array as below.

@Component({
    selector: 'greetings-ac-app2',
    providers: [Http],
    templateUrl: 'app/greetings-ac2.html',
    directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
    pipes: []
})

answered Sep 25, 2016 at 15:19

Shivang Gupta

3,3791 gold badge28 silver badges25 bronze badges

2 Comments

Shivang Gupta Over a year ago

Who soever has marked it wrong, May i know what is the reason?

Ted Hopp Over a year ago

I didn't downvote, but the reason is probably that you don't want a new Http object for each component. Better to have a single one for the app, which is accomplished by importing it at the NgModule level.

mareks · Accepted Answer · 2016-08-30 12:53:27Z

3

as of RC5 you need to import the HttpModule like so :

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

then include the HttpModule in the imports array as mentioned above by Günter.

answered Aug 30, 2016 at 12:53

mareks

7926 silver badges5 bronze badges

Comments

Enayat · Accepted Answer · 2017-04-26 18:55:26Z

3

Just include the following libraries:

import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';

and include the http class in providers section, as follows:

@Component({
  selector: '...',
  templateUrl: './test.html',
  providers: [YourHttpTestService]

answered Apr 26, 2017 at 18:55

Enayat

4,0621 gold badge35 silver badges52 bronze badges

Comments

Experimenter · Accepted Answer · 2017-11-08 17:20:01Z

3

If you have this error in your tests, you should create Fake Service for all services:

For example:

import { YourService1 } from '@services/your1.service';
import { YourService2 } from '@services/your2.service';

class FakeYour1Service {
 public getSomeData():any { return null; }
}

class FakeYour2Service {
  public getSomeData():any { return null; }
}

And in beforeEach:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    providers: [
      Your1Service,
      Your2Service,
      { provide: Your1Service, useClass: FakeYour1Service },
      { provide: Your2Service, useClass: FakeYour2Service }
    ]
  }).compileComponents();  // compile template and css
}));

answered Nov 8, 2017 at 17:20

Experimenter

2,5161 gold badge24 silver badges29 bronze badges

Comments

Shashwat Gupta · Accepted Answer · 2018-01-25 10:57:43Z

3

**

Simple soultion : Import the HttpModule and HttpClientModule on your app.module.ts

**

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



@NgModule({
 declarations: [
   AppComponent, videoComponent, tagDirective, 
 ],
 imports: [
  BrowserModule, routing, HttpClientModule, HttpModule

],
providers: [ApiServices],
bootstrap: [AppComponent]
})
export class AppModule { }

answered Jan 25, 2018 at 10:57

Shashwat Gupta

5,31845 silver badges33 bronze badges

1 Comment

Sobvan Over a year ago

This solution works, but HttpModule is marked as deprecated in Angular 5.2. I think some component is not upgraded, and still uses the old Http implementation.

fiza khan · Accepted Answer · 2017-12-11 09:58:29Z

1

All you need to do is to include the following libraries in tour app.module.ts and also include it in your imports:

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

@NgModule({
  imports:    [ HttpModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

answered Dec 11, 2017 at 9:58

fiza khan

1,30614 silver badges24 bronze badges

Comments

isherwood · Accepted Answer · 2017-12-12 20:42:48Z

1

I faced this issue in my code. I only put this code in my app.module.ts.

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

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

edited Dec 12, 2017 at 20:42

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Nov 2, 2017 at 9:03

Saurabh

5186 silver badges6 bronze badges

1 Comment

isherwood Over a year ago

Please don't repeat existing answers. Doing so doesn't add value to the community.

Alekya · Accepted Answer · 2018-08-16 08:03:30Z

1

import { HttpModule } from '@angular/http'; package in your module.ts file and add it in your imports.

answered Aug 16, 2018 at 8:03

Alekya

2516 silver badges16 bronze badges

Comments

Dibya Prakash Das · Accepted Answer · 2018-08-23 12:01:22Z

1

I just add both these in my app.module.ts:

"import { HttpClientModule }    from '@angular/common/http';

&

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

Now its works fine.... And dont forget to add in the

@NgModule => Imports:[] array

edited Aug 23, 2018 at 12:01

answered Aug 23, 2018 at 9:16

Dibya Prakash Das

114 bronze badges

Collectives™ on Stack Overflow

Angular EXCEPTION: No provider for Http

16 Answers 16

6 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

6 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related