web-dev-qa-db-ja.com

Angular 4：循環依存関係をインスタンス化できません！InjectionToken_HTTP_INTERCEPTORS

私は知っています、この質問は重複するように聞こえるかもしれませんし、この問題を解決できないスタックオーバーフローで見つかったすべてを試しましたので、私に耐えてください

エラーを再現できるようにするために、私はこれを考えてコード全体を提供しています

Github Repo

問題

次のエラーが表示されます。

プロバイダー解析エラー：循環依存関係をインスタンス化できません！ InjectionToken_HTTP_INTERCEPTORS（ "[ERROR->]"）：NgModule AppModule in ./AppModule@-1:-1

enter image description here

シナリオに関する情報（注）

注1ファイル： response-interceptor.service.ts

パス：./src/app/shared/interceptors/response-interceptor/

HTTPClient応答をインターセプトして、401エラーが発生し、エラーが発生した場合、ユーザーに再ログインを依頼する必要があります。

ユーザーに再ログインプロンプトを表示するために、global-functions-services関数 'relogin'を持つ

注2ファイル： global-function.service.ts

パス：./src/app/shared/services/helper-services/global-function/

これがすべて起こり始めた場所です... PersonServiceを注入するとすぐに

  constructor(
    public dialog: MatDialog,
    private _personService: PersonService
  ) { }

このエラーが発生し、 PersonService で問題を引き起こす可能性のあるimportが見つかりません。

PersonService：
./src/app/shared/services/api-services/person/person.service.ts

import { IRequest } from './../../../interfaces/I-request';
import { environment } from 'environments/environment';
import { Injectable } from '@angular/core';

// for service
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/toPromise';

// models
import { Person } from 'app/shared/models/person';
import { RequestFactoryService, REQUEST_TYPES } from 'app/shared/factories/request-factory/request-factory.service';

@Injectable()
export class PersonService {
  private _requestService: IRequest;

  constructor(
    _requestFactoryService: RequestFactoryService
  ) {
    this._requestService = _requestFactoryService.getStorage(REQUEST_TYPES.HTTP);
  }

  public signup(record): Promise<Person> {
    let url = environment.api + 'person/public/signup';

    return this._requestService.post(url, record)  as Promise<Person>;;
  }

  public authenticate(code: string, password: string): Promise<Person> {
    let url = environment.api + 'auth/signin';

    let postData = {
      code: code,
      password: password
    }

    return this._requestService.post(url, postData) as Promise<Person>;
  }
}

リクエスト

この解決策を提案してください、私はすでに問題を理解するために2日を無駄にしていますが、運はありません。

どうもありがとう！！あらかじめ

javascriptangularcircular-dependency
8
Vikas Bansal

周期的な依存関係とは、太陽を周回する惑星のように、無限に周回することを意味します。

解決策：依存関係チェーンを解除し、コードをリファクタリングします。

GlobalFunctionService-> PersonService->など...-> ResponseInterceptorService->に戻り、-> GlobalFunctionServiceに戻ります。
サイクルが完了しました。

GlobalFunctionServiceからPersonService依存関係を削除します。 （とにかく使用されていませんが、必要な場合は別の方法で見つけてください。）

      import { PersonService } from 'app/shared/services/api-services/person/person.service';
      import { Injectable } from '@angular/core';
      import { InputModalComponent } from 'app/shared/components/input-modal/input-modal.component';
      import { MatDialog } from '@angular/material';

      @Injectable()
      export class GlobalFunctionService {

        constructor(
          public dialog: MatDialog
        ) { }

        relogin(): void {
          let dialogRef = this.dialog.open(InputModalComponent, {
            width: '250px',
            data: { title: "Please provide your password to re-login." }
          });

          dialogRef.afterClosed().subscribe(result => {
            debugger
            console.log('The dialog was closed');
            let password = result;
          });
        }
      }
6
codeSetter

Response-interceptor.service.tsを変更する必要があります

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

constructor( inj: Injector) { 
   this._globalFunctionService=inj.get(GlobalFunctionService)
 }

詳細情報を入手できます このリンクから

5
jitender

コンストラクターでsetTimeout（）関数を使用して、サービスを割り当てます。

constructor(private injector: Injector) {
  setTimeout(() => {
      this.loginService = this.injector.get(LoginService);
  })
}

問題が発生した場合は、これを試して元に戻してください。

3
Jayendra Bariya