web-dev-qa-db-fra.com

Angular 4: Impossible d'instancier la dépendance cyclique! InjectionToken_HTTP_INTERCEPTORS

Je sais, cette question peut sembler dupliquée et j’ai essayé tout ce qui est trouvé sur le flux de transfert superposable, incapable de résoudre ce problème, donc veuillez vous en tenir à moi

Pour vous permettre de reproduire l’erreur, je vous fournis tout le code à cause de cela. 

Github Repo

Problème

Je reçois l'erreur suivante:

Erreurs d'analyse du fournisseur: Impossible d'instancier une dépendance cyclique! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): dans NgModule AppModule dans ./AppModule@-1:-1

 enter image description here

Informations sur le scénario (Notes)

Note 1 Fichier: response-interceptor.service.ts

Chemin: ./src/app/shared/interceptors/response-interceptor/

J'intercepte les réponses HTTPClient pour vérifier l'erreur 401 et lorsque l'erreur se produit, je dois demander à l'utilisateur de se reconnecter.

Pour afficher l'invite de nouvelle connexion à l'utilisateur, j'ai créé un global-functions-services doté d'une fonction 'relogin'

Note 2 Fichier: global-function.service.ts

Chemin: ./src/app/shared/services/helper-services/global-function/

Voici l'endroit où tout cela a commencé à se produire .... dès que j'injecte le PersonService

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

Je reçois cette erreur et dans PersonService je ne trouve aucune import susceptible de causer le problème.

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>;
  }
}

Demande 

S'il vous plaît suggérer une solution pour cela, j'ai déjà perdu 2 jours pour comprendre le problème, mais pas de chance.

Merci beaucoup!! en avance

javascriptangularcircular-dependency
5
Vikas Bansal

La dépendance cyclique, c’est tourner en rond, comme les planètes en orbite autour du Soleil.

Solution: rompez la chaîne de dépendance, recadrez le code.

Vous avez GlobalFunctionService -> PersonService -> ainsi de suite ... -> ResponseInterceptorService -> et retour à -> GlobalFunctionService .
Cycle terminé.

SUPPRIMEZ la dépendance PersonService de GlobalFunctionService. (Ce n'est pas utilisé quand même, si vous en avez besoin, alors trouvez un moyen différent de vous déplacer.)

      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;
          });
        }
      }
4
codeSetter

Vous devez modifier votre response-interceptor.service.ts

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

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

Vous pouvez obtenir plus d'informations À partir de ce lien

2
jitender

Utilisez la fonction setTimeout () dans le constructeur pour attribuer le service.

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

Essayez ceci et revenez en arrière si vous rencontrez un problème.

0
Jayendra Bariya