1

I'm currently receiving the following error:

EXCEPTION: No provider for Http! (Login -> AuthHttp -> Http)

AuthHttp is a reference to Angular2-jwt. Could this be an issue with that? I've been staring at this for a while, and I can't find what error I could possibly have.

In my login.ts:

import {Component} from 'angular2/core';
import {
  FORM_DIRECTIVES,
  FormBuilder,
  ControlGroup,
  Validators,
  AbstractControl,
  Control
} from 'angular2/common';
import {Http, Headers} from 'angular2/http';
import {Router} from 'angular2/router';

import {ButtonRadio} from 'ng2-bootstrap/ng2-bootstrap';
import {AuthHttp, AuthConfig} from 'angular2-jwt';

import {AuthService} from '../../services/auth/authService';
import {AlertService} from '../../services/alerts/alertsService';
import {User} from '../../datatypes/user/user';

@Component({
  selector: 'login',
  template: require('./login.html'),
  directives: [ ButtonRadio, FORM_DIRECTIVES ],
  providers: [AuthService, AlertService, Http, AuthHttp]
})

In my main.ts:

document.addEventListener('DOMContentLoaded', function main() {
  bootstrap(App, [
    ('production' === process.env.ENV ? [] : ELEMENT_PROBE_PROVIDERS),
    HTTP_PROVIDERS,
    ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy }),
    provide(AuthConfig, { useFactory: () => {
      return new AuthConfig({
        headerName: 'Authorization',
        //headerPrefix: 'Bearer ',
        tokenName: 'auth_token',
        noJwtError: true
      });
    }}),
    AuthHttp,
    Http,
    ConnectionBackend
  ])
  .catch(err => console.error(err));
});
Louis Cruz
  • 1,703
  • 2
  • 15
  • 20
  • 1
    Try to clean up your providers, just put on the top level what is not really needed on the lower levels. I had some similar issue, but it somehow vanished after some time... :) – eesdil Jan 24 '16 at 07:39
  • Always good advice! Things are really messy now because I've been trying every combination without luck. Cleaning things up now, maybe that'll fix it. – Louis Cruz Jan 24 '16 at 19:08
  • 1
    Why do you configure again `HTTP_PROVIDERS`, `Http`, `AuthHttp` at the level of the component? `Http` provider is already contained into `HTTP_PROVIDERS`... This answer could help you to understand how dependency injection works in Angular2: http://stackoverflow.com/questions/34804298/whats-the-best-way-to-inject-one-service-into-another-in-angular-2-beta/34807397 – Thierry Templier Jan 24 '16 at 19:15
  • Thanks, Theirry. I've removed all of the `HTTP_PROVIDERS` injections elsewhere, but I'm still getting the same issue. – Louis Cruz Jan 24 '16 at 19:56

2 Answers2

1

You have to add HTTP_BINDINGS

import {HTTP_BINDINGS} from 'angular2/http';


bootstrap(..., [
  ...
  HTTP_BINDINGS,
  ...
]).catch(...);
Eggy
  • 4,052
  • 7
  • 23
  • 39
  • 2
    It looks like [HTTP_BINDINGS](https://angular.io/docs/ts/latest/api/http/HTTP_BINDINGS-let.html) was moved to HTTP_PROVIDERS, which I already have. – Louis Cruz Jan 24 '16 at 19:03
  • 1
    @LouisCruz Good to know, but I shouldn't be too suprised because it's still beta. Maybe your problem is that you inject `HTTP_PROVIDERS` at bootstrap and int the component? I think one time will do. – Eggy Jan 24 '16 at 19:37
  • I've removed all other `HTTP_PROVERS` injections. Still getting the same error. – Louis Cruz Jan 24 '16 at 19:55
0

It seems that this was indeed an error with Angular2-jwt, or at least with its configuration. Here is the way it should be configured.

Still, I've managed to clean things up a bit. If this problem actually runs deeper, I'll try to reopen.

Louis Cruz
  • 1,703
  • 2
  • 15
  • 20