Angular2-jwt: No provider for AuthHttp! when it's provided correctly

[bubears125]

At least I thought I was providing correctly. Below are the relevant snippets of my app.module file and the service in which I use AuthHttp. I followed the configuration in the ReadMe for creating the factory method to provide for AuthHttp, but there is a persisting issue with it not being recognized in my service. I've read the literature on nested dependency injections, and I feel as though I'm doing things correctly.

app.module.ts
```import { Http, RequestOptions } from '@angular/http';
import { provideAuth, AuthHttp, AuthConfig } from 'angular2-jwt';

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
return new AuthHttp(new AuthConfig(), http, options);
}

@NgModule({
declarations: [
AppComponent,
ButtonFormComponent,
...
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
AppRoutingModule
],
providers: [
{
provide: LocationStrategy,
useClass: HashLocationStrategy
},
{
provide: AuthHttp,
useFactory: authHttpServiceFactory,
deps: [Http, RequestOptions]
},

employee.service.ts

import { AuthHttp } from 'angular2-jwt';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { ApiSettings } from './api-settings';

@Injectable()
export class EmployeeService {
api: String;
auth: String;
constructor(private http: Http, private authHttp: AuthHttp) {
this.api = ApiSettings.API;
this.auth = ApiSettings.Auth;
}
```

[dan-kez]

I'm also having the same issue

[kwinkel]

Same

Did anyone solve this?

[cissecedric]

Same here, thanks for helping.

[bubears125]

So I'm pretty sure that my issue was with my browser. It wasn't doing a full refresh and so it wasn't getting the latest Angular code (my project was running in Docker). That's all my issue was. Sorry if that's not much help!

[kwinkel]

I do still have the same issue

https://github.com/auth0/angular2-jwt/issues/364

[carl-angelo]

You just have to import your auth.module in app.module.

app.module.ts

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule,
FormsModule,
AuthModule // <----- Here is the auth.module class
],
providers: [
AuthGuard,
AlertService,
AuthenticationService
],
bootstrap: [AppComponent]
})

export class AppModule { }

[garkuwa]

You should use "ModuleWithProviders" for AuthHttp (it's like a 'shared' service in AuthModule):

export class AuthModule {

public static forRoot():ModuleWithProviders{
return {
ngModule:AuthModule,
providers:[
{
provide: AuthHttp,
useFactory: authHttpServiceFactory,
deps: [Http, RequestOptions]
}

  ]
.....

Then in your AppModule just import your module with .forRoot():
imports: [
......
AuthModule.forRoot(),
.......
],

[rlarin]

Try this:
...
imports[
AuthModule.forRoot(new AuthConfig({
headerName: 'Authorization',
headerPrefix: 'my-bearer-prefix',
tokenName: 'my-token-name',
tokenGetter: (() => localStorage.getItem('token') || ''),
globalHeaders: [{ 'Content-Type': 'application/json' }],
noJwtError: true
})),
]

[morismael]

I ran into the same issue and fought for days using Github and this repo.
It turned out that the solution is very simple as I found on StackOverFlow: (https://stackoverflow.com/a/42064959):

In app.module.ts:

import { AUTH_PROVIDERS } from 'angular2-jwt';
...
providers: [AUTH_PROVIDERS, ...],

As simple as that!

[j-ew-s]

@morismael It worked for me. Thanks for sharing!

[DollyGoel]

@morismael thanks for sharing. Finally, I get the solution.

[alenskupnjak]

It worked for me. Thanks for sharing!

[hi-meral]

Thank you morismael . This works simply. :-D

import { AUTH_PROVIDERS } from 'angular2-jwt';
...
providers: [AUTH_PROVIDERS, ...],

[syedmuhammadhussain]

Thank you morismael .

import { AUTH_PROVIDERS } from 'angular2-jwt';
...
providers: [AUTH_PROVIDERS, ...],