Угловой 2 не может разрешить все параметры для обслуживания

У меня есть две службы: LoginService и UserService. Я пытаюсь ввести UserService в LoginService, и приложение не будет запущено.

В консоли у меня есть ошибка:

Ошибка: не удается разрешить все параметры для UserService: ([object Object],?). в SyntaxError.ZoneAwareError(http://localhost: 4200/polyfills.bundle.js: 7156: 33) в SyntaxError.BaseError [в качестве конструктора]

это мой LoginService:

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

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

и UserService:

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

    }

угловой модуль:

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

Ответ 1

У вас есть круглые ссылки.

Для вашего UserService требуется LoginService, а для LoginService требуется UserService.

Удалите одну из зависимостей. Например, реорганизуйте свой UserService, чтобы он не требовал ссылки на LoginService

Ответ 2

Как и в других опубликованных упоминается круговая зависимость... вы можете рассмотреть возможность использования forwardRef() для решения этой проблемы.

Вкратце, мы можем вводить Forward Reference вместо реального сервиса. Таким образом, инъекция услуг будет отложена. Таким образом, круговая зависимость решена.

Вот пример кода:

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

Вы можете проверить эту страницу для получения дополнительной информации.