Angular 6 входит в бесконечный цикл циклической зависимости, когда я внедряю сервис, который использует HttpClient внутри моего класса HttpInterceptor

Question

Я обнаружил эту проблему много раз в разных версиях Angular, но несколько источников говорят, что она уже исправлена, например, другой похожий вопрос о Stackoverflow имеет этот ответ , который говорит, что он был решен в Angular 5.2 некоторые другие проблемы на Github говорят, что он решен в 6.0.2 , я использую Angular 6.0.3, но все же я получаю эту проблему, всякий раз, когда я пытаюсь внедрить сервис, который использует HttpClient внутри моего класса HttpInterceptor (который следует добавить токен jwt к запросам, если jwt был получен в этой службе)

Я не получаю предупреждение или ошибку, что у меня есть циклическая зависимость, помещаю, я вижу в консоли браузера тысячи запросов, которые перехватчик вызывает службу и наоборот.

Как правильно решить эту проблему? (желательно без сохранения jwt в локальном хранилище)

(т.е. используя перехватчик и получая JWT от службы)

Мой сервис:

 ....
 // only showing parts that matter, HttpClient is injected here
 // to be used in calling the API services

  constructor(public http: HttpClient, private route: ActivatedRoute,
 public translate: TranslateService, private router: Router,
 public snackBar: MatSnackBar, private notification: NotificationService) {

//

Мой HttpInterceptor:

import { Observable } from 'rxjs';
import { Location } from '@angular/common';
import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { HttpRequest } from '@angular/common/http';
import { HttpHandler } from '@angular/common/http';
import { HttpEvent } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { DataService } from './data/data.service';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
  constructor(private injector: Injector) {}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const dataService = this.injector.get(DataService);

  console.log('hey there, we are here INTERCEPTOR');
  if (dataService.jwt) {
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${dataService.jwt}`
          }
        });
      }

    return next.handle(request);
  }
}

нг версия

Angular CLI: 6.0.8
Node: 10.0.0
OS: win32 x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.1.0
@angular/cli                      6.0.8
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.3.1
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Answer 1

Я смог обойти это, создав HttpClient внутри службы:

@Injectable()
export class DataService {

  private http: HttpClient;

  constructor(httpBackend: HttpBackend) {
    this.http = new HttpClient(httpBackend);    
  }
}

Это сломало проблему бесконечного цикла в моем случае (используя Angular@6.1.10).