NameService के लिए कोणीय कोई प्रदाता नहीं

326

मुझे एक कक्षा को एक कोणीय घटक में लोड करने में समस्या हुई है। मैं इसे लंबे समय से हल करने की कोशिश कर रहा हूं; मैं भी एक फ़ाइल में यह सब शामिल होने की कोशिश की है। मेरे पास क्या है:

Application.ts

/// <reference path="../typings/angular2/angular2.d.ts" />

import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";

@Component({
    selector:'my-app',
    injectables: [NameService]
})
@View({
    template:'<h1>Hi {{name}}</h1>' +
    '<p>Friends</p>' +
    '<ul>' +
    '   <li *ng-for="#name of names">{{name}}</li>' +
    '</ul>',
    directives:[NgFor]
})

class MyAppComponent
{
    name:string;
    names:Array<string>;

    constructor(nameService:NameService)
    {
        this.name = 'Michal';
        this.names = nameService.getNames();
    }
}
bootstrap(MyAppComponent);

सेवाओं / NameService.ts

export class NameService {
    names: Array<string>;
    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    getNames()
    {
        return this.names;
    }
}

मैं एक त्रुटि संदेश कहता रहता हूँ No provider for NameService।

क्या कोई मेरे कोड के साथ समस्या को सुलझाने में मेरी मदद कर सकता है?

typescript angular systemjs

— M.Svrcek
स्रोत

6

अल्फा 42 के रूप में: @Component ({प्रदाताओं: [NameService]})

— टिम्ज

470

आपको providersइसके बजाय उपयोग करना होगाinjectables

@Component({
    selector: 'my-app',
    providers: [NameService]
})

पूरा कोड नमूना यहाँ ।

— क्लास मेलबर्न
स्रोत

7

@unobf आयात कथन मेरे लिए टूटे हुए नहीं लगते। पिछला जवाब अच्छी तरह से कोणीय 2 पुस्तकालय के पुराने अल्फाजों के लिए सही हो सकता है। मूल गाइड अल्फा -28 को संदर्भित करता है, मैं अल्फा 35 का उपयोग करता हूं। इसके अलावा, मैं एक पूर्ण कोड नमूने के लिए एक लिंक प्रदान करता हूं, इसलिए मुझे लगता है कि मैंने काफी जानकारी प्रदान की है।

— क्लास मेलबर्न

4

भविष्य के गोगलर्स के लिए एक अपडेट: providersनवीनतम बीटा (बीटा 0) पर काम करता है।

— नथनहलंग 5

@nathanhleung दोनों बाइंडिंग और प्रोवाइडर काम करते हैं - क्या यह अस्थायी है या वे सिर्फ आंतरिक रूप से एक ही काम कर रहे हैं

— सिमॉन_वेवर

@Simon_Weaver हम्म ने इसे नवीनतम बीटा में बदल दिया हो सकता है - बीटा.0 में मैं इसके साथ काम करने के लिए नहीं मिल सकाbindings

— nathanhleung

1

क्या होगा यदि सेवा किसी अन्य सेवा से उपयोग की जाती है? मैंने इसे मॉड्यूल प्रदाताओं में जोड़ा, जो मुझे लगा कि यह विश्व स्तर पर उपलब्ध कराएगा, लेकिन फिर भी उस त्रुटि को प्राप्त कर रहा है

— सोनिक सोल

79

कोणीय 2 में तीन स्थान हैं जो आप "सेवाएं" प्रदान कर सकते हैं:

बूटस्ट्रैप
मूल घटक
अन्य घटक या निर्देश

"बूटस्ट्रैप प्रदाता का विकल्प एंगुलर की अपनी पूर्वापेक्षित सेवाओं को कॉन्फ़िगर करने और ओवरराइड करने के लिए है, जैसे इसका रूटिंग समर्थन।" - संदर्भ

यदि आप अपने पूरे ऐप (यानी, सिंगलटन) में केवल NameService का एक उदाहरण चाहते हैं, तो इसे providersअपने रूट के ऐरे में शामिल करें:

@Component({
   providers: [NameService],
   ...
)}
export class AppComponent { ... }

Plunker

यदि आपके पास प्रति घटक एक उदाहरण है, तो providersइसके बजाय घटक के कॉन्फ़िगरेशन ऑब्जेक्ट में सरणी का उपयोग करें :

@Component({
   providers: [NameService],
   ...
)}
export class SomeOtherComponentOrDirective { ... }

अधिक जानकारी के लिए पदानुक्रमित इंजेक्शन देखें ।

— राज रजोक
स्रोत

4

यह एक बहुत अच्छा जवाब है। यह रूट घटक में सेवा की घोषणा के बीच के अंतर को बनाम अन्य बाल घटकों में घोषित करने के बीच अंतर को बताता है।

— Taf

34

कोणीय 2 बीटा के रूप में:

@Injectableअपनी सेवा में इस प्रकार जोड़ें :

@Injectable()
export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

और अपने घटक विन्यास के providersरूप में जोड़ें :

@Component({
    selector: 'my-app',
    providers: [NameService]
})

— magiccrafter
स्रोत

22

आप इंजेक्शन लगाने की जानी चाहिए NameServiceअंदर providersअपने की सरणी AppModuleके NgModuleमेटाडाटा।

@NgModule({
   imports: [BrowserModule, ...],
   declarations: [...],
   bootstrap: [AppComponent],
   //inject providers below if you want single instance to be share amongst app
   providers: [MyService]
})
export class AppModule {

}

यदि आप अपने एप्लिकेशन की स्थिति के बारे में परेशान किए बिना विशेष घटक स्तर के लिए एक निर्भरता बनाना चाहते हैं, तो आप घटक providersमेटाडेटा विकल्प पर निर्भरता को स्वीकार कर सकते हैं जैसे कि स्वीकृत @Klass उत्तर दिखाया गया है।

— पंकज पारकर
स्रोत

मैंने @NgModule अनुभाग में app.module.seden.ts: प्रदाताओं में एक सेवा जोड़ने का प्रयास किया है: प्रदाता: [DataManagerService] लेकिन फिर भी त्रुटि मिलती है: त्रुटि: DataManagerService के लिए कोई प्रदाता नहीं!

— पॉल

1

@Paul क्या आप सही मॉड्यूल में अपनी सेवा इंजेक्ट कर रहे हैं? और इस DataManagerServiceपर @Injectableडेकोरेटर है?

— पंकज पारकर

15

आश्चर्यजनक रूप से, सिंटैक्स फिर से बदल गया है जो कि कोणीय :-) के नवीनतम संस्करण में है। कोणीय 6 डॉक्स से :

एंगुलर 6.0 के साथ शुरुआत करते हुए, एक सिंगलटन सेवाओं को बनाने का पसंदीदा तरीका उस सेवा पर निर्दिष्ट करना है जिसे इसे एप्लिकेशन रूट में प्रदान किया जाना चाहिए। यह सेवा के @Injectable डेकोरेटर पर रूट करने के लिए प्रदान की गई सेटिंग द्वारा किया जाता है:

src / ऐप्स / user.service.0.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

— डेरिक मिलर
स्रोत

14

आपको अपने AppModule के NgModule मेटाडेटा के प्रदाता सरणी के अंदर NameService इंजेक्ट किया जाना चाहिए।

@NgModule({
   providers: [MyService]
})

और सुनिश्चित करें कि आपके कंपोनेंट में समान नाम (केस सेंसिटिव) द्वारा आयात किया जा रहा है, बीज़हाउस SystemJs केस सेंसिटिव (डिज़ाइन द्वारा) है। यदि आप इस तरह अपनी परियोजना फाइलों में विभिन्न पथ नाम का उपयोग करते हैं:

main.module.ts

import { MyService } from './MyService';

अपने-component.ts

import { MyService } from './Myservice';

तब सिस्टम के जे एस डबल आयात करेंगे

— saghar.fadaei
स्रोत

1

अति उत्कृष्ट! बैरल से लेकर समूह आयात तक मैंने इस त्रुटि का सामना किया। आपके SystemJS टिप ने मेरी मदद की :)

— जॉनी एडमिट

12

कोणीय v2 में और अब यह है:

@Component({ selector:'my-app', providers: [NameService], template: ... })

— supercobra
स्रोत

7

कोणीय 2 बदल गया है, यहाँ है कि आपके कोड का शीर्ष कैसा दिखना चाहिए:

import {
  ComponentAnnotation as Component,
  ViewAnnotation as View, bootstrap
} from 'angular2/angular2';
import {NameService} from "./services/NameService";

@Component({
  selector: 'app',
  appInjector: [NameService]
})

इसके अलावा, आप अपनी सेवा में गेटर्स और सेटर का उपयोग करना चाहते हैं:

export class NameService {
    _names: Array<string>;
    constructor() {
        this._names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    get names() {
        return this._names;
    }
}

फिर अपने ऐप में आप बस कर सकते हैं:

this.names = nameService.names;

मेरा सुझाव है कि आप plnkr.co पर जाएं और एक नया Angular 2 (ES6) प्लंक बनाएं और इसे पहले वहां काम करने के लिए प्राप्त करें। यह आपके लिए सब कुछ सेट कर देगा। एक बार जब यह वहां काम कर रहा होता है, तो इसे अपने अन्य वातावरण में कॉपी करें और उस वातावरण के साथ किसी भी मुद्दे को ट्राई करें।

— unobf
स्रोत

6

त्रुटि No provider for NameServiceएक सामान्य समस्या है जो कई Angular2 शुरुआती सामना करती है।

कारण : किसी भी कस्टम सेवा का उपयोग करने से पहले आपको इसे प्रदाताओं की सूची में जोड़कर NgModule के साथ पंजीकृत करना होगा:

समाधान:

@NgModule({
    imports: [...],
    providers: [CustomServiceName]
})

— सुनीत बंसल
स्रोत

5

आपके पास बूटस्ट्रैप-कमांड में घोषित निर्भरताएं भी हो सकती हैं जैसे:

bootstrap(MyAppComponent,[NameService]);

कम से कम यही मेरे लिए अल्फ़ा 40 में काम आया।

यह लिंक है: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0

— टोबियास गैसमैन
स्रोत

4

नमस्ते, आप अपने .ts फ़ाइल में इसका उपयोग कर सकते हैं:

पहले अपनी सेवा को इस .ts फ़ाइल में आयात करें:

import { Your_Service_Name } from './path_To_Your_Service_Name';

फिर उसी फ़ाइल में आप जोड़ सकते हैं providers: [Your_Service_Name]:

 @Component({
      selector: 'my-app',
      providers: [Your_Service_Name],
      template: `
        <h1>Hello World</h1> `   
    })

— शुभम वर्मा
स्रोत

4

इसे उन प्रदाताओं में जोड़ें जो इंजेक्टेबल नहीं हैं

@Component({
    selector:'my-app',
    providers: [NameService]
})

— गोपीनाथ कालियप्पन
स्रोत

3

कोणीय में आप एक सेवा को दो तरीकों से पंजीकृत कर सकते हैं:

1. मॉड्यूल या रूट कंपोनेंट में सर्विस रजिस्टर करें

प्रभाव:

सभी घटकों में उपलब्ध है
आजीवन आवेदन पर उपलब्ध है

यदि आप किसी सेवा को आलसी लोडेड मॉड्यूल में पंजीकृत करते हैं तो आपको ध्यान रखना चाहिए:

सेवा केवल उस मॉड्यूल में घोषित घटकों में उपलब्ध है
मॉड्यूल लोड होने पर ही सेवा आजीवन आवेदन पर उपलब्ध होगी

2. किसी अन्य एप्लिकेशन घटक में एक सेवा पंजीकृत करें

प्रभाव:

घटक में सेवा का एक अलग उदाहरण इंजेक्ट किया जाएगा

यदि आपको किसी सेवा को किसी अन्य एप्लिकेशन घटक में पंजीकृत करना है तो आपको ध्यान रखना चाहिए

इंजेक्शन सेवा का उदाहरण केवल घटक और उसके सभी बच्चों में उपलब्ध होगा।
उदाहरण घटक जीवनकाल पर उपलब्ध होगा।

— आरजे रजवान
स्रोत

2

आपको इसे प्रदाताओं के सरणी में जोड़ना होगा, जिसमें आपके घटक पर सभी चित्रण शामिल हैं।

इस भाग को कोणीय प्रलेखन में देखें:

एक घटक में प्रदाताओं को पंजीकृत करना

यहां एक संशोधित HeroComponent है जो अपने प्रदाताओं के सरणी में HeroService को पंजीकृत करता है।

import { Component } from '@angular/core';

import { HeroService } from './hero.service';

@Component({
  selector: 'my-heroes',
  providers: [HeroService],
  template: `
  <h2>Heroes</h2>
  <hero-list></hero-list>
  `
})
export class HeroesComponent { }

जब एक आवेदन घटक बनाम NgModule का उपयोग करें

एक तरफ, एक NgModule में एक प्रदाता रूट इंजेक्टर में पंजीकृत है। इसका मतलब है कि एक NgModule के भीतर पंजीकृत प्रत्येक प्रदाता पूरे आवेदन में सुलभ होगा।

दूसरी ओर, एप्लिकेशन घटक में पंजीकृत एक प्रदाता केवल उस घटक और उसके सभी बच्चों पर उपलब्ध है।

यहां, APP_CONFIG सेवा को पूरे आवेदन में उपलब्ध होना चाहिए, इसलिए यह AppModule @NgModule प्रदाताओं सरणी में पंजीकृत है। लेकिन चूंकि HeroService का उपयोग केवल हीरो फीचर क्षेत्र में किया जाता है और कहीं और नहीं, इसलिए इसे HeroComponent में पंजीकृत करना समझ में आता है।

यह भी देखें "क्या मुझे ऐप-वाइड प्रदाताओं को रूट AppModule या रूट AppComponent में जोड़ना चाहिए?" NgModule अकसर किये गए सवाल में।

तो आपके मामले में, केवल नीचे दिए गए प्रदाताओं की तरह इंजेक्षन बदलें:

@Component({
  selector: 'my-app',
  providers: [NameService]
})

इसके अलावा कोणीय के नए संस्करणों में, @ दृश्य और कुछ अन्य सामान चले गए।

अधिक जानकारी के लिए, यहां जाएं ।

— एलिरेज़ा
स्रोत

2

app.module.ts फ़ाइल में प्रदाताओं [] सरणी में अपनी सेवा जोड़ें। नीचे की तरह

// यहाँ मेरी सेवा CarService है

app.module.ts

import {CarsService} from './cars.service';

providers: [CarsService] // you can include as many services you have

— सुरेन्द्र परचुरु
स्रोत

1

Angular2 आपको बूटस्ट्रैप फंक्शन कॉल में सभी इंजेक्शंस घोषित करने की आवश्यकता है। इसके बिना आपकी सेवा एक इंजेक्शन योग्य वस्तु नहीं है।

bootstrap(MyAppComponent,[NameService]);

— preet0982
स्रोत

1

यह काफी सही नहीं है। हम बूटस्ट्रैप (), या में सेवा को शामिल कर सकते हैंproviders घटक के कॉन्फ़िगरेशन ऑब्जेक्ट में सरणी में । यदि यह providersसरणी में शामिल है , तो हमें प्रति घटक एक उदाहरण मिलता है। अधिक जानकारी के लिए पदानुक्रमित इंजेक्शन देखें ।

— मार्क राजकॉक

जैसा कि @MarkRajcok ने कहा है कि हम बूटस्ट्रैप के समय केवल उन्हीं सेवाओं को प्रदान करते हैं, जिन्हें हमें पूरे ऐप में उपयोग करना है। ऐसा करने से हमें प्रदाता में हर बार इंजेक्ट करने की आवश्यकता नहीं थी क्योंकि यह हर घटक के लिए उदाहरण बनाएगा।

— परदीप जैन

1

अपनी सेवा के रूप में @ शामिल करें:

export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

और अपने घटक में प्रदाताओं को इस प्रकार जोड़ें:

@Component({
    selector: 'my-app',
    providers: [NameService]
})

या यदि आप एप्लिकेशन पर अपनी सेवा का उपयोग करना चाहते हैं तो आप ऐप प्रदाता में पास कर सकते हैं

— sachinkasana
स्रोत

1

Blockquote

एक घटक में प्रदाताओं को पंजीकृत करना

यहां एक संशोधित HeroComponent है जो अपने प्रदाताओं के सरणी में HeroService को पंजीकृत करता है।

import { Component } from '@angular/core';

import { HeroService } from './hero.service';

@Component({
  selector: 'my-heroes',
  providers: [HeroService],
  template: `
  `
})
export class HeroesComponent { }

— चनाका वीरसिंघे
स्रोत