web-dev-qa-db-fra.com

Angular 2 ne peut pas résoudre tous les paramètres du service

J'ai deux services: LoginService et UserService. J'essaie d'injecter UserService dans LoginService et l'application ne fonctionnera pas.

Dans la console, j'ai l'erreur:

Erreur: impossible de résoudre tous les paramètres pour UserService: ([objet objet],?). sur SyntaxError.ZoneAwareError ( http: // localhost: 4200/polyfills.bundle.js: 7156: ) sur SyntaxError.BaseError [en tant que constructeur]

voici mon LoginService: 

import {UserService} from '../services/user.service';
@Injectable()
export class LoginService {

  constructor(public _http: Http,public us:UserService) {
  }

et UserService: 

 @Injectable()
    export class UserService {
    constructor(private _http: Http , public _ls: LoginService) {

    }

module angulaire: 

import {LoginService} from './services/login.service';
import {UserService} from './services/user.service';

@NgModule({
  declarations: [
    AppComponent,


  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

  ],
  exports: [BrowserModule, SlimLoadingBarModule],
  providers: [UserService, LoginService, appRoutingProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }
angularserviceinject
12
Mohammed Yassine CHABLI

Vous avez une référence circulaire.

Votre UserService nécessite LoginService et LoginService nécessite UserService.

Supprimez l'une des dépendances. Par exemple. refactorisez votre UserService afin qu'il ne nécessite pas de référence à LoginService

29
Steve Land

Comme l'autre posté a mentionné une dépendance circulaire ... vous pouvez envisager d'utiliser forwardRef() pour résoudre ce problème.

En un mot, nous pouvons injecter une référence directe au lieu du service réel. L'injection de service sera donc différée. Ainsi, la dépendance circulaire est résolue.

Voici un exemple de code:

import {Component, Inject, forwardRef} from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>Favourite framework: {{ name }}</h1>'
})
class AppComponent {
  name: string;

  constructor(@Inject(forwardRef(() => NameService)) nameService) {
    this.name = nameService.getName();
  }
}

class NameService {
  getName () {
    return "Angular";
  }
}

Vous pouvez vérifier cette page pour plus de détails.

3
Scott McMaster