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

Answer 1

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