Angular 2 can't resolve all parameters for service

Question

I have two services: LoginService and UserService. I am trying to inject UserService into LoginService and the app won't run.

In the console, I have the error:

Error: Can't resolve all parameters for UserService: ([object Object], ?). at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7156:33) at SyntaxError.BaseError [as constructor]

this is my LoginService:

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

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

and UserService:

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

    }

angular module:

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

please add the angular module and your `UserService` code. – n00dl3 Jun 05 '17 at 14:53 — n00dl3, Jun 05 '17 at 14:53
You just created a circular dependency – Jota.Toledo Jun 05 '17 at 15:05 — Jota.Toledo, Jun 05 '17 at 15:05

score 30 · Accepted Answer · edited Oct 24 '17 at 10:21

30

You have a circular reference.

Your UserService requires LoginService, and LoginService requires UserService.

Remove one of the dependencies. E.g. refactor your UserService so that it does not require a reference to LoginService

edited Oct 24 '17 at 10:21

Liam George Betsworth

18,373
5
39
42

answered Jun 05 '17 at 14:56

Steve Land

4,852
2
17
36

exactly , what is the solution ? – Yassine CHABLI Jun 05 '17 at 14:58
Remove one of the dependencies. E.g. refactor your UserService so that it does not require a reference to LoginService – Steve Land Jun 05 '17 at 15:00
this is the one possible solution ? – Yassine CHABLI Jun 05 '17 at 15:01
2

Yes - thats the _only_ solution. – Steve Land Jun 05 '17 at 15:01

score 3 · Answer 2 · edited Oct 06 '17 at 07:57

3

As the other posted mentioned a circular dependency... you may consider using forwardRef() to resolve this issue.

In a nutshell, we can inject a Forward Reference instead of the real service. So the service injection will be deferred. Thus the circular dependency is solved.

Here is a code sample:

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

You can check this page for further details.

edited Oct 06 '17 at 07:57

Tamas Rev

7,008
5
32
49

answered Oct 05 '17 at 20:56

Scott McMaster

52
3

Can you include the necessary parts of the forum post in your question? It is always recommended to include the actual answer rather than referring with a link – Ibo Oct 05 '17 at 21:14
I think it should be something more like this: `constructor(@Inject(forwardRef(() => NameService)) nameService: NameService) { this.name = nameService.getName(); }` – Robert Feb 27 '18 at 12:44

Angular 2 can't resolve all parameters for service

2 Answers2