AngularJS 2 - Using HTTP Wrapper - Getting "No Provider!" Error

Question

For one of our projects, I need to use an HTTP wrapper that will send an authorisation header with every request. However, upon loading the page with npm start, I get the following error in console:

EXCEPTION: Error in http://localhost:3000/app/app.component.html:2:2 caused by: No provider for HttpClient! ORIGINAL EXCEPTION: No provider for HttpClient!

Note: for the sake of not pasting all the code, I use dots ("...") to represent "self-explanatory" things such as importing the core libraries, etc. I'm also using "placeholder" to replace names that I cannot disclose.

For the wrapper I'm using, I found the following:

http.wrapper.ts:

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';

@Injectable()
export class HttpClient {
   ...
}

In my API service, I do the following to make use of the HTTP wrapper:

api.service.ts:

import { Injectable, OnInit } from '@angular/core';
import { Response } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { HttpClient } from '../http.wrapper';

@Injectable
export class APIService implements OnInit {
   ...

   constructor(private httpClient: HttpClient) {}

   getActiveScenarios(): Observable<Scenario[]> { ... }
}

app.module.ts:

...
import { HttpClient } from './common/http.wrapper';
import { MyModule } from './placeholder/my-module.module';
...

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

my-module.component.ts:

import { ApiService } from '../placeholder/services/api.service';

@Component({
   moduleId: module.id,
   selector: 'placeholder',
   templateUrl: './my-module.component.html',
   providers: [ ApiService ]
})
export class MyModuleComponent implements OnInit {
   constructor(private apiService: ApiService) {}

   ngOnInit() {}

   ...
}

Sasxa · Accepted Answer · 2016-11-16 10:05:05Z

1

Add HttpClient to module's list of providers to register it with the injector.

app.module.ts

...
import { HttpClient } from './common/http.wrapper';
import { MyModule } from './placeholder/my-module.module';
...

@NgModule({
   imports: [BrowserModule, MyModule],
   declarations: [AppComponent],
   exports: [AppComponent, BrowserModule],
   providers: [HttpClient],
   bootstrap: [AppComponent]
})
export class AppModule {}

answered Nov 16, 2016 at 10:05

Sasxa

41.4k17 gold badges91 silver badges102 bronze badges

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

1 Comment

Alain Bressers Over a year ago

Thank you very much, I'll accept this as the answer. It would seem that adding that to the providers and adding HttpModule (suggested by Günther Zöchbauer) to imports made it work. Very much appreciated!

Günter Zöchbauer · Accepted Answer · 2016-11-16 10:02:39Z

0

You need to import the HttpModule

imports: [BrowserModule, MyModule, HttpModule],

to make HttpClient available.

answered Nov 16, 2016 at 10:02

Günter Zöchbauer

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

4 Comments

Alain Bressers Over a year ago

Thank you for the very swift response. I've tried both putting it there and in bootstrap, but it still says the same thing.

Günter Zöchbauer Over a year ago

That's all that's needed. Can you reproduce the problem in a Plunker?

Alain Bressers Over a year ago

I forgot to mention your name in the other reply, but it seems that doing both what you suggested, as well as putting HttpClient in the list of providers, is what made it work now. Thank you very much. :)

Günter Zöchbauer Over a year ago

You shouldn't need to add HttpClient to providers. If you need this, you're doing something wrong. angular.io/docs/ts/latest/tutorial/toh-pt6.html

Collectives™ on Stack Overflow

AngularJS 2 - Using HTTP Wrapper - Getting "No Provider!" Error

2 Answers 2

app.module.ts

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

app.module.ts

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related