Come si inserisce un servizio personalizzato in un altro servizio personalizzato?

Question

Si verifica un errore No Provider for FirebaseService anche dopo aver eseguito il bootstrap dello FirebaseService nel metodo bootstrap(app, [providers]).

ho seguito Pascal's guide for injecting a service within a service e ha funzionato quando ho iniettato il servizio Http con i HTTP_PROVIDERS bootstrap, ma ricevo un errore di No providers for FirebaseService dopo aver cambiato al mio proprio servizio.

Posso iniettare entrambi i provider singolarmente rimuovendo l'iniezione di FirebaseService bene. Anche se lo faccio contructor(@Inject(FirebaseService) firebase: FirebaseService){} non funzionerà, ma la mia comprensione è che l'aggiunta del decoratore @Injectable() dovrebbe avere lo stesso effetto.

d'accesso-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

Ho effettuato il plunk e sta funzionando e inietta il servizio Firebase nel servizio utenti.

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

Answer 2

di non aver inserito UserService in main.ts. provare ad aggiungere anche questo:

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

tua pagina login-page.ts dipende UserService quindi ha bisogno di ottenere bootstraped pure.

Answer 3

Ho appena appreso che i percorsi delle istruzioni di importazione sono sensibili al maiuscolo/minuscolo.

Avevo import {UserService} from '../../services/user.service'; mentre la directory era ../../SERVICES/user.service.

Dov'è l'emoji di facepalm?