Circular Dependency Injection Error: jwtOptionsFactory

[marcschuricht]

I am trying to use a jwtOptionsFactory and I get a circular dependency error when I use the deps array for DI:

core.js:5967 ERROR Error: Uncaught (in promise): Error: NG0200: Circular dependency in DI detected for TokenService
Error: NG0200: Circular dependency in DI detected for TokenService
    at throwCyclicDependencyError (core.js:1352)
    at R3Injector.hydrate (core.js:11141)
    at R3Injector.get (core.js:10966)
    at injectInjectorOnly (core.js:4907)
    at ɵɵinject (core.js:4911)
    at injectArgs (core.js:4990)
    at Object.factory (core.js:11234)
    at R3Injector.hydrate (core.js:11145)
    at R3Injector.get (core.js:10966)
    at injectInjectorOnly (core.js:4907)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28269)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

FWIW: I can reproduce the error here:
https://codesandbox.io/s/throbbing-wave-0do4q?file=/src/app/app.module.ts

Below is my configuration...
AppModule.ts

export function jwtOptionsFactory(tokenService) {
  return {
    tokenGetter: () => {
      return tokenService.getToken();
    },
    allowedDomains: ["localhost:4200"],
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [  
// ...
  JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
        deps: [TokenService]
      },
// ...
],
  providers: [TokenService, CookieService, JwtHelperService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Token.service.ts:

@Injectable({
  providedIn: "root",
})
export class TokenService {

  constructor(private jwt: JwtHelperService, private cookieService: CookieService) {

  }
// ...
 public getToken = () => {
    return this.token;
  }
}

package.json:

{
  "name": "blast-radius-app",
  "version": "0.0.0",
  "scripts": {
    ...
  },
  "private": true,
  "dependencies": {
    "@angular/core": "^11.0.5",
    "@angular/material": "^11.0.3",
...
    "@auth0/angular-jwt": "^5.0.2",
    "ngx-cookie-service": "^11.0.2",
...
  },
  "devDependencies": {
   ...
    "typescript": "~4.0.2"
  }
}

If I remove the deps array then I no longer get the circular dependency error, but obviously DI of the TokenService into the jwtOptionsFactory no long works (TokenService is undefined in the factory).
I have to think I am doing something stupidly wrong. Thanks for helping me out!

[piotaixr]

I just had the same problem. It can be fixed by NOT injecting the JwtHelperService in your TokenService. But I suppose you need utilities provided by it (if not, you should not inject it 😉).

I forked the repo and fixed the problem by extracting the utility methods that were in fact just simple functions, from the service. They can now be used without injecting it and hopefully solving this circular dependency problem.

I'm waiting for my first PR to get merged before opening others, but you can in the meantime point your package.json here: https://github.com/piotaixr/angular2-jwt

Edit: I tried to release a package on github packages but i'mve never done that and I think i did it wrong... The 5.0.3 version works

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you have not received a response for our team (apologies for the delay) and this is still a blocker, please reply with additional information or just a ping. Thank you for your contribution! 🙇‍♂️