Hello, I'm struggling with injecting a service into a service

[sfabriece]

Is it possible to inject a service into another service.
I’m getting this error:

AuthService:

import {UserService} from './index';
@Injectable()
export class AuthService {
     
 constructor(
        private publicHttp: Http,
        private authHttp: AuthHttp,
        private userService: UserService
    ){}

UserService:

@Injectable()
export class UserService {
     constructor(){}
}

I’ve added the both Service into the providers array of the app

 error    Error: Uncaught (in promise): No provider for UserService! (MyApp -> AuthService -> UserService)
   at resolvePromise (http://localhost:8100/build/js/angular2-polyfills.js:602:26)
   at Anonymous function (http://localhost:8100/build/js/angular2-polyfills.js:638:18)
   at ZoneDelegate.prototype.invokeTask (http://localhost:8100/build/js/angular2-polyfills.js:421:18)
   at onInvokeTask (http://localhost:8100/build/js/app.bundle.js:27793:25)
   at ZoneDelegate.prototype.invokeTask (http://localhost:8100/build/js/angular2-polyfills.js:421:18)
   at Zone.prototype.runTask (http://localhost:8100/build/js/angular2-polyfills.js:320:22)
   at drainMicroTaskQueue (http://localhost:8100/build/js/angular2-polyfills.js:541:26)

[xr0master]

UserService hasn’t instance. You must provide it before. You could put your UserService in @App provider.

[iignatov]

EDIT: It’s possible if you’re including both services in the app’s providers as suggested by @rapropos.

@sfabriece AFAIK it’s not possible, here’s the summary, but also check the linked topic for more details:

@infoproducts

Anyway, that actually takes me back to where my problems initially started, and that is when I try to inject a dependency into UserData.

@rlouie

The situation you describe is in fact referenced in the Angular 2 docs: Angular

@infoproducts

Unfortunately it seems like it is indeed by design and I’m not holding my breath hoping for it to change.

There’s an ongoing discussion about it here: DI: Adding a provider to a class (not component) · Issue #5622 · angular/angular · GitHub

[rapropos]

@iignatov: it is definitely possible. That thread you linked is really confusing because OP didn’t want to put both services in the app’s providers array. This OP claims that they did do that, and if that’s really true it should work. Here’s some snippets from a working application of mine:

@Component({
  providers: [HTTP_PROVIDERS, Sink, Identity, AuthedHttp],
  template: require<string>('./app.html')
})
@Injectable()
export class MyApp {
}

@Injectable()
@Component({
  template: require<string>('./login.html')
})
export class LoginPage {
  constructor(private _me:Identity) {
  }
}

@Injectable()
export class Identity {
   constructor(private _sink:Sink) {
  }
}

export class Sink {
  constructor() {
  }
}

The _me instance variable in the login page has its sink properly provided by DI. There’s even an additional level, as AuthedHttp injects Identity in order to use it to wrap http methods with authentication tokens:

Injectable()
export class AuthedHttp {
  constructor(private _http: Http, private _identity: Identity) {
  }
}

[iignatov]

@rapropos

That thread you linked is really confusing because OP didn’t want to put both services in the app’s providers array. This OP claims that they did do that, and if that’s really true it should work.

My bad, I’ve actually overlooked/missed that part:

@sfabriece

I’ve added the both Service into the providers array of the app

But yes, in this case I agree with you.

Thanks, I updated my answer above accordingly.

[sfabriece]

Thank you all for the replies, I ended up not injecting the service. But I have confirmed that it is indeed possible to add a service to another service.

[samiran]

Hi,

I facing same issue , struggling to inject my service to another service

My Code :CheckNetworkProvider

import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
import { Nav, Platform } from ‘ionic-angular’;
import { Network } from ‘@ionic-native/network’;
@Injectable()
export class CheckNetworkProvider {

constructor(
public http: Http,
public network: Network,
public platform: Platform) {
console.log(‘Hello CheckNetworkProvider Provider’);
}

CheckNetworkConnection(): string {
let networkType: string;

this.platform.ready().then(() => {
    networkType = this.network.type;
});

return networkType;

}

}

2)GitService (in GitService I want to inject CheckNetworkProvider )
import { CheckNetworkProvider } from ‘…/providers/check-network/check-network’;

@Injectable()
export class GitService {
private headers = new Headers({ ‘Content-Type’: ‘application/json’ });
private gitApIUrl = ‘https://api.github.com/’; // URL to web api

constructor(
private http: Http,
public networkProvider: CheckNetworkProvider) {
}
}

My provider array

providers: [
CheckNetworkProvider,
GitService,
AuthenticateService,
Network,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
]

in my GitService I am getting error when I trying to use networkProvider to call method.

Someone please help me where i am doing wrong?

[SigmundFroyd]

What error are you getting?

Also, CheckNetworkConnection() will always return undefined. You’ll need to return a promise:

CheckNetworkConnection(): string {
  return this.platform.ready().then(() => this.network.type);
}