Issue with JwtHelperService in new implementation

Im not sure if the JwtHelperService can be used together with the Interceptor. I want to use it in another service I have the following issue.

Cannot instantiate cyclic dependency! JWT_OPTIONS (“[ERROR ->]”): in NgModule CoreModule

Settings

CoreModule

    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
        deps: [TokenHandler]
      }
    }),

TokenHandler (own class for jwt decode …)

constructor(private cookieService: CookieService, private jwtHelper: JwtHelperService) { }

[lehoffma]

I have the same issue, but I still don’t know how to resolve it.

I import the JwtModule with the forRoot() stuff in my main app.module like this:

JwtModule.forRoot(
	{
		jwtOptionsProvider: {
			provide: JWT_OPTIONS,
			useFactory: jwtOptionsFactory,
			deps: [AuthService]
		}
	}
)

The jwtOptionsFactory looks like this:

export function jwtOptionsFactory(tokenService: AuthService) {
	return {
		tokenGetter: () => {
			return tokenService.getToken();
		}
	}
}

Both the JwtHelperService and the HttpClient get injected into the AuthService, because it implements the token refreshing logic, too.

The resulting error looks like this:

Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
Cannot instantiate cyclic dependency! InjectionToken_JWT_OPTIONS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

The AuthService is placed inside its own AuthModule, which is also included (with forRoot()) in the appModule. The JwtModule is only included in the AppModule though.

Oh another maybe useful info: I’m using my own (second) interceptor to handle token refresh logic, which depends on the AuthService, too.

Is there something I did wrong?

[xavadu]

Hi all, FTR, I was facing the same issue, the problem is that we need to inject a service in the jwtOptionsFactory but this service is also provide in the module providers.

it was tricky, maybe not the best, but I can solved the issue on that way:

app.module.ts

// [..]
import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
import { jwtOptionsFactory } from './authentication/jwtOptions.factory'
// [..]
import { AuthService } from './authentication/auth.service';
import { ConfigService } from './services/config.service';

@NgModule({
    imports: [
        JwtModule.forRoot({
            jwtOptionsProvider: {
                provide: JWT_OPTIONS,
                useClass: jwtOptionsFactory
            }
        })
    ],
    // [...]
    providers: [
        AuthService,
        ConfigService,
// [..]

jwtOptions.factory.ts

import { Injector, Injectable } from '@angular/core';

import { AuthService } from './auth.service';
import { ConfigService } from '../services/config.service';

// https://github.com/auth0/angular2-jwt/issues/416
@Injectable()
export class jwtOptionsFactory {
    private authService: AuthService;
    private configService: ConfigService;

    public skipWhenExpired: boolean = true;
    public whitelistedDomains: string[];
    public blacklistedRoutes: string[];

    constructor(inj: Injector) {
        // https://github.com/angular/angular/issues/18224
        // https://github.com/angular/angular/issues/18224#issuecomment-316951787
        setTimeout(() => {
            this.authService = inj.get(AuthService);
            this.configService = inj.get(ConfigService);

            this.whitelistedDomains = this.configService.get('environment.jwt.whitelistedDomains');
            this.blacklistedRoutes = this.configService.get('environment.jwt.blacklistedRoutes');
        });
    }

    public tokenGetter = () => this.authService.getToken();
}