आप किसी अन्य कस्टम सेवा में कस्टम सेवा कैसे इंजेक्ट करते हैं?

Question

bootstrap(app, [providers]) विधि में FirebaseService बूटस्ट्रैपिंग के बाद भी मुझे No Provider for FirebaseService त्रुटि मिल रही है।

मैं Pascal's guide for injecting a service within a service पीछा किया और यह काम किया जब मैं HTTP_PROVIDERS बूटस्ट्रैप साथ Http सेवा इंजेक्शन, लेकिन मैं अपने ही सेवा में बदलने के बाद एक No providers for FirebaseService त्रुटि प्राप्त।

मैं FirebaseService के इंजेक्शन को ठीक करके दोनों प्रदाताओं को व्यक्तिगत रूप से इंजेक्ट कर सकता हूं। भले ही मैं contructor(@Inject(FirebaseService) firebase: FirebaseService){} करता हूं, यह काम नहीं करेगा, लेकिन मेरी समझ यह है कि @Injectable() सजावट को एक ही प्रभाव होना चाहिए।

प्रवेश-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

मैंने प्लंक बनाया और यह काम कर रहा है और उपयोगकर्ताओं की सेवा में फायरबेस सेवा इंजेक्ट कर रहा है।

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

आप main.ts में UserService डालने नहीं कर रहे हैं। साथ ही इस जोड़ने का प्रयास करें:

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

अपने login-page.ts पेज निर्भर है UserService तो यह रूप में अच्छी तरह bootstraped होने की जरूरत है पर।

Answer 3

मैंने अभी सीखा है कि आयात विवरण पथ केस-संवेदी हैं।

मेरे पास import {UserService} from '../../services/user.service'; था जबकि निर्देशिका ../../SERVICES/user.service थी।

चेहरे की ईमोजी कहां है?