How do you inject a custom service into another custom service?

Question

I'm getting a No Provider for FirebaseService error even after bootstrapping the FirebaseService in the bootstrap(app, [providers]) method.

I followed Pascal's guide for injecting a service within a service and it worked when I injected the Http service with the HTTP_PROVIDERS bootstrapped, but I receive a No providers for FirebaseService error after changing it to my own service.

I can inject both providers individually by removing the injection of the FirebaseService just fine. Even if I do contructor(@Inject(FirebaseService) firebase: FirebaseService){} it won't work, but my understanding is that adding the @Injectable() decorator should have the same effect.

login-page.ts

import {Component} from '@angular/core';
import {UserService} from '../../Services/user.service';
import {FirebaseService} from '../../services/firebase.service';
import {  UserModel } from '../../export';


@Component({
    moduleId: 'app/PAGES/login-page/',
    selector: 'login-page',
    templateUrl: 'login-page.html',
    styleUrls: ['login-page.css'],
    providers: [ UserService]
})
export class LoginPage {
    constructor(private userService: UserService) {}
    user:UserModel = new UserModel();
    hello: string = "You got yourself a login page, sir";

    dostuff() {

        console.log(this.user);
      //  this.userService.createUser(this.user);
    }
}

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { FirebaseService } from './SERVICES/firebase.service';

bootstrap(AppComponent, [
     FirebaseService
]);

UserService

import { Injectable, Inject } from '@angular/core';
import {FirebaseService} from './firebase.service';
import { UserModel } from '../export';

@Injectable()
export class UserService {

    constructor(private firebaseService: FirebaseService ) {}

    public createUser(user: UserModel): any {
        console.log(user);
   //     this.firebaseService.set(user)
    }

    public getUser(username: string): any {
   //     return this.firebaseService.get("users/" + username);
    }
}

FirebaseService

@Injectable()
export class FirebaseService {

    public get(path: string): any {
      console.log(path);
    }

    public set(objectToSave: any) {
       console.log(objectToSave);
    }
}

For reference, the full repository is here: github.com/ChuckkNorris/Ng2RcTest — Levi Fuller
– Levi Fuller, Commented Jun 6, 2016 at 5:59

Rusinov Maksim · Accepted Answer · 2016-06-09 23:22:13Z

I made plunk and it's working and inject firebase service into users service.

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { App } from './app';
import { FirebaseService } from './firebase.service';

bootstrap(App, [
   FirebaseService
]);

app.ts

//our root app component
import {Component} from '@angular/core'
import {UserService} from './user.service';

@Component({
  selector: 'my-app',
  providers: [UserService],
  template: `
    <div>
      <h2>Hello {{name}}</h2>

    </div>
  `,
  directives: []
})
export class App {
  constructor(private userService: UserService) {
    this.userService.createUser({h: 1});
    this.name = 'Angular2 (Release Candidate!)'
  }
}

user.service.ts

import { Injectable, Inject } from '@angular/core';
import {FirebaseService} from './firebase.service';
import { UserModel } from '../export';

@Injectable()
export class UserService {

    constructor(private firebaseService: FirebaseService ) {}

    public createUser(user: UserModel): any {
      console.log(this.firebaseService)
      console.log(user);
   //     this.firebaseService.set(user)
    }

    public getUser(username: string): any {
   //     return this.firebaseService.get("users/" + username);
    }
}

firebase.service.ts

import {Injectable} from '@angular/core'
@Injectable()
export class FirebaseService {

    public get(path: string): any {
      console.log(path);
    }

    public set(objectToSave: any) {
       console.log(objectToSave);
    }
}

http://plnkr.co/edit/RLVT9dvfqH9W2BvE0qMG?p=preview

@PavelSapehin It's because this answer was written before the concept of modules was introduced. The new way to do it is to simply provide necessary services in the appropriate module (such as the root module) and a singleton service instance will be available throughout the application.
@Dyna, Thanks. It's not so obvious where to look at in the relatively large code snippet.

Levi Fuller · Accepted Answer · 2016-06-11 15:50:43Z

1

I just learned that the import statement paths are case-sensitive.

I had import {UserService} from '../../services/user.service'; while the directory was ../../SERVICES/user.service.

Where's the facepalm emoji?

edited Jun 11, 2016 at 15:50

answered Jun 10, 2016 at 6:04

Levi Fuller

16.1k4 gold badges41 silver badges46 bronze badges

1 Comment

Unnie Over a year ago

Dude, you saved my day. this is so silly, my folder was "Authentication" , so my import statement auto generated had "../Authentication/" , so changed it to "../authentication/" and everything worked. Maybe good solution is to not put caps in file names & folder names. I'm a newbie learning the tricks

Rakhat · Accepted Answer · 2017-02-08 09:09:59Z

you are not inserting UserService in main.ts. try adding this as well :

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { PLATFORM_DIRECTIVES, provide } from '@angular/core';
import { AppComponent } from './app.component';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { UxButton, UxText } from './export';
import { FirebaseService } from './SERVICES/firebase.service';
import { UserService } from './SERVICES/user.service';

bootstrap(AppComponent, [
     FirebaseService,
     UserService     //<-- add this
    ,ROUTER_DIRECTIVES 
    ,ROUTER_PROVIDERS
    ,provide(PLATFORM_DIRECTIVES, {useValue: UxButton, multi: true})
    ,provide(PLATFORM_DIRECTIVES, {useValue: UxText, multi: true})
]);

your login-page.ts page is dependent on UserService so it needs to get bootstraped as well.

I already tried that with no success. I don't want a singleton instance for UserService, only for the Firebase instance. It's never been an issue before.

Collectives™ on Stack Overflow

How do you inject a custom service into another custom service?

3 Answers 3

3 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Linked

Related