নেম সার্ভিসের জন্য কৌণিক কোনও সরবরাহকারী নেই

Question

একটি কৌনিক উপাদানতে একটি শ্রেণি লোড করতে আমার একটি সমস্যা হয়েছে। আমি দীর্ঘদিন ধরে এটি সমাধান করার চেষ্টা করছি; এমনকি আমি এগুলি একটি একক ফাইলে যোগদানের চেষ্টা করেছি। আমার যা আছে তা হ'ল:

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 ।

কেউ আমার কোড সহ সমস্যাটি চিহ্নিত করতে আমাকে সহায়তা করতে পারে?

Comments

আলফা ৪২: @ কম্পোনেন্ট হিসাবে ({সরবরাহকারী: [নেম সার্ভিস]})

— টিমজ

Answer 1

providersপরিবর্তে আপনাকে ব্যবহার করতে হবেinjectables

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

এখানে কোডের নমুনা সম্পূর্ণ করুন ।

Comments

@ ইউনুফ আমদানির বিবৃতি আমার কাছে ভাঙা লাগবে না। পূর্ববর্তী উত্তরটি কৌনিক 2 লাইব্রেরির পুরানো বর্ণমালার জন্য সঠিক হতে পারে। মূল গাইডটি আলফা -28 বোঝায়, আমি আলফা 35 ব্যবহার করি Also এছাড়াও, আমি একটি সম্পূর্ণ কোড নমুনায় একটি লিঙ্ক সরবরাহ করি, তাই আমি মনে করি যে আমি যথেষ্ট পরিমাণে তথ্য সরবরাহ করেছি।

— ক্লাস মেলবর্ন

ভবিষ্যতের গুগলদের জন্য একটি আপডেট: providersসর্বশেষ বিটা (বিটা 0) এ কাজ করে।

— নাথানহলেং

@ নাথানহলেং উভয় বাঁধাই এবং সরবরাহকারী কাজ করে - এই অস্থায়ী নাকি তারা কেবল অভ্যন্তরীণভাবে একই কাজ করছে

— সাইমন_উইভার

@ সিমন_উইভার হুম তারা সর্বশেষ বিটাতে এটি পরিবর্তন করেছে - বিটা.0 এ আমি এটি নিয়ে কাজ করতে পারিনিbindings

— নাথানহলেং

পরিষেবাটি যদি অন্য কোনও পরিষেবা থেকে ব্যবহৃত হয় তবে কী হবে? আমি এটিকে মডিউল সরবরাহকারীদের সাথে যুক্ত করেছি যা আমি ভেবেছিলাম এটি এটি বিশ্বব্যাপী উপলব্ধ করবে, তবে এখনও ত্রুটিটি পেয়ে

— সোনিক সোল

Answer 2

কৌণিক 2 তে তিনটি জায়গা রয়েছে যেখানে আপনি পরিষেবা "সরবরাহ" করতে পারেন:

1. বুটস্ট্র্যাপ
2. মূল উপাদান
3. অন্যান্য উপাদান বা নির্দেশ

"বুটস্ট্র্যাপ সরবরাহকারী বিকল্পটি অ্যাংুলারের নিজস্ব পূর্ববর্তী নিবন্ধিত পরিষেবাদি যেমন এর রাউটিং সমর্থন কনফিগার করতে ও ওভাররাইড করার উদ্দেশ্যে is" - রেফারেন্স

আপনি যদি নিজের পুরো অ্যাপ্লিকেশন (যেমন, সিঙ্গেলটন) জুড়ে কেবলমাত্র নেম সার্ভিসের একটি উদাহরণ চান তবে এটি providersআপনার মূল উপাদানটির অ্যারেতে অন্তর্ভুক্ত করুন :

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

Plunker

যদি আপনার পরিবর্তে উপাদানগুলির জন্য একটি উদাহরণ থাকে তবে এটি ব্যবহার করুন providers পরিবর্তে উপাদানটির কনফিগারেশন অবজেক্টে অ্যারেটি :

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

দেখুন হায়ারারকিকাল injectors আরও তথ্যের জন্য ডক।

Comments

এটি সত্যিই ভাল উত্তর। এটি আরও মূল উপাদানগুলিতে পরিষেবা ঘোষণার বনাম অন্যান্য সন্তানের উপাদানগুলিতে ঘোষণার মধ্যে পার্থক্য ব্যাখ্যা করে।

— তাফ

Answer 3

কৌণিক 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]
})

Answer 4

আপনি ইনজেকশনের করা উচিত 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স্বীকৃত @ ক্লাস উত্তরের মতো উপাদান মেটাডেটা বিকল্পের উপর নির্ভরতা ইনজেকশন করতে পারেন ।

Comments

আমি @ এনজিএমডিউল বিভাগে অ্যাপ.মডিউল.শ্রেড.টিসে একটি পরিষেবা যুক্ত করার চেষ্টা করেছি: সরবরাহকারী: [ডেটা ম্যানেজারসেবার] তবে ত্রুটিটি পেয়েছি: ত্রুটি: ডেটা ম্যানেজারসেবার জন্য কোনও সরবরাহকারী নেই!

— পল

@ পল আপনি কি সঠিক পরিষেবাতে আপনার পরিষেবা ইনজেকশন দিচ্ছেন? এবং এটির উপর DataManagerServiceসজ্জিত আছে @Injectable?

— পঙ্কজ পার্কার

Answer 5

মর্মাহতভাবে, কৌণিক :-) এর সর্বশেষ সংস্করণে বাক্যটি আবার পরিবর্তন হয়েছে : কৌণিক 6 টি ডকস থেকে :

কৌণিক 6.0 দিয়ে শুরু করে, একটি সিঙ্গলটন পরিষেবাদি তৈরি করার পছন্দের উপায়টি পরিষেবাটিতে নির্দিষ্ট করে দেওয়া উচিত যে এটি অ্যাপ্লিকেশন রুটে সরবরাহ করা উচিত। এটি সার্ভিসের @ ইনজেক্টেবল ডেকরেটারে রুট করার জন্য সরবরাহ করা সেট করে এটি করা হয়:

src / অ্যাপ্লিকেশন / user.service.0.ts

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

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

Answer 6

আপনার অ্যাপমডুলির এনজিএমডুল মেটাডেটা সরবরাহকারীর অ্যারেতে আপনাকে নাম সার্ভিস ইনজেকশন করা উচিত।

@NgModule({
   providers: [MyService]
})

এবং নিশ্চিত হয়ে নিন যে আপনার উপাদানটিতে একই নামে আমদানি করা হবে (কেস সেনসিটিভ), বেকউস সিস্টেমজেগুলি কেস সেনসিটিভ (ডিজাইনের মাধ্যমে)। আপনি যদি এই জাতীয় প্রকল্পের ফাইলগুলিতে পৃথক পথের নাম ব্যবহার করেন:

main.module.ts

import { MyService } from './MyService';

আপনার-component.ts

import { MyService } from './Myservice';

তারপরে সিস্টেম জেএস দ্বিগুণ আমদানি করবে

Comments

অসাধারণ! গোষ্ঠী আমদানিতে ব্যারেল ব্যবহার করার সময় আমি এই ত্রুটির মুখোমুখি হয়েছি। আপনার সিস্টেমজেএস টিপ আমাকে সাহায্য করেছে :)

— জনি অ্যাডামিত

Answer 7

কৌণিক ভি 2 এ এবং এটি এখন:

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

Answer 8

কৌণিক 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 এ গিয়ে একটি নতুন অ্যাঙ্গুলার 2 (ES6) প্লঙ্ক তৈরি করার পরামর্শ দিচ্ছি এবং প্রথমে এটিতে কাজ করার পরামর্শ দিচ্ছি। এটি আপনার জন্য সবকিছু সেট আপ করবে। এটি সেখানে কাজ করার পরে এটি আপনার অন্যান্য পরিবেশে অনুলিপি করুন এবং সেই পরিবেশের সাথে কোনও সমস্যা ছড়িয়ে দিন।

Answer 9

ত্রুটিটি No provider for NameServiceএকটি সাধারণ সমস্যা যা অনেক কৌণিক 2 সূচনাপ্রাপ্তদের মুখোমুখি।

কারণ : যে কোনও কাস্টম পরিষেবা ব্যবহার করার আগে আপনাকে প্রথমে এটি সরবরাহকারীদের তালিকায় যুক্ত করে এনজিমডুলের সাথে নিবন্ধন করতে হবে:

সমাধান:

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

Answer 10

আপনি বুটস্ট্র্যাপ-কমান্ডে যেমন নির্ভরতাগুলি ঘোষণা করতে পারেন:

bootstrap(MyAppComponent,[NameService]);

আলফা 40-তে আমার জন্য কমপক্ষে সেটাই কাজ করেছিল।

এটি লিঙ্কটি: http://www.syntaxsuccess.com/viewarticle/d dependency-inication-in-angular-2.0

Answer 11

হাই, আপনি এটি আপনার .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> `   
    })

Answer 12

এটি ইনজেক্টেবল নয় এমন সরবরাহকারীগুলিতে যুক্ত করুন

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

Answer 13

কৌণিক ক্ষেত্রে আপনি দুটি উপায়ে একটি পরিষেবা নিবন্ধিত করতে সক্ষম:

1. মডিউল বা মূল উপাদান একটি পরিষেবা নিবন্ধন করুন

প্রভাব:

• সমস্ত উপাদান উপলব্ধ
• আজীবন প্রয়োগে উপলব্ধ on

যদি আপনি কোনও অলস বোঝা মডিউলটিতে কোনও পরিষেবা নিবন্ধন করেন তবে আপনার যত্ন নেওয়া উচিত:

• পরিষেবাটি কেবলমাত্র সেই মডিউলে ঘোষিত উপাদানগুলিতে উপলব্ধ

• মডিউলটি লোড হয়ে গেলেই পরিষেবাটি আজীবন আবেদনে পাওয়া যাবে

২. অন্য কোনও অ্যাপ্লিকেশন উপাদানটিতে একটি পরিষেবা নিবন্ধন করুন

প্রভাব:

• উপাদানটির মধ্যে পরিষেবার একটি পৃথক উদাহরণ ইনজেকশনের ব্যবস্থা করা হবে

আপনি যদি অন্য কোনও অ্যাপ্লিকেশন উপাদানটিতে কোনও পরিষেবা নিবন্ধভুক্ত করেন তবে আপনার যত্ন নেওয়া উচিত

• ইনজেকশনের পরিষেবার উদাহরণটি কেবলমাত্র উপাদান এবং তার সমস্ত শিশুদের মধ্যে উপলব্ধ।

• উদাহরণটি উপাদানটির আজীবন উপলব্ধ হবে।

Answer 14

আপনাকে এটি সরবরাহকারী অ্যারেতে যুক্ত করতে হবে, এতে আপনার উপাদানগুলির সমস্ত অবক্ষয় অন্তর্ভুক্ত রয়েছে।

কৌনিক ডকুমেন্টেশনে এই বিভাগটি দেখুন:

কোনও উপাদান সরবরাহকারীদের নিবন্ধকরণ করা হচ্ছে

এখানে একটি সংশোধিত হিরোস কম্পোনেন্ট রয়েছে যা হিরো সার্ভিসকে তার সরবরাহকারী অ্যারেতে নিবন্ধভুক্ত করে।

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 { }

কখন অ্যাপ্লিকেশন উপাদান বনাম এনজিএমডিউল ব্যবহার করবেন

একদিকে, একটি এনজিডমুলেলে সরবরাহকারী রুট ইনজেক্টারে নিবন্ধিত। তার মানে এই যে কোনও এনজিএমডুলের মধ্যে নিবন্ধিত প্রতিটি সরবরাহকারী পুরো অ্যাপ্লিকেশনটিতে অ্যাক্সেসযোগ্য হবে।

অন্যদিকে, একটি অ্যাপ্লিকেশন উপাদানটিতে নিবন্ধিত একটি সরবরাহকারী কেবলমাত্র সেই উপাদান এবং তার সমস্ত শিশুদের জন্য উপলব্ধ।

এখানে, APP_CONFIG পরিষেবাটি সমস্ত অ্যাপ্লিকেশন জুড়ে উপলব্ধ হওয়া দরকার, সুতরাং এটি অ্যাপমোডুল @ এনজিএমডিউল সরবরাহকারী অ্যারেতে নিবন্ধিত। তবে যেহেতু হিরো সার্ভিস কেবলমাত্র হিরোস বৈশিষ্ট্যযুক্ত অঞ্চলে এবং অন্য কোথাও ব্যবহৃত হয় না, তাই এটি হিরোস কম্পোনেন্টে রেজিস্ট্রেশন করা বোধগম্য।

এছাড়াও দেখুন "রুট অ্যাপমোডুল বা রুট অ্যাপকোম্পোন্টে অ্যাপ্লিকেশন-সরবরাহকারী সংযুক্ত করা উচিত?" এনজিএমডিউল এফএকিউতে।

সুতরাং আপনার ক্ষেত্রে, কেবল নীচের মতো সরবরাহকারীগুলিতে ইনজেকটেবলগুলি পরিবর্তন করুন:

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

অ্যাঙ্গুলারের নতুন সংস্করণগুলিতে, @ ভিউ এবং অন্যান্য কিছু স্টাফ চলে গেছে।

আরও তথ্যের জন্য, এখানে যান ।

Answer 15

app.module.ts ফাইলে সরবরাহকারীদের [] অ্যারেতে আপনার পরিষেবা যুক্ত করুন। নীচের মত

// এখানে আমার পরিষেবা কার সার্ভিস

app.module.ts

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

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

Answer 16

অ্যাঙ্গুলার 2 এর জন্য আপনাকে বুটস্ট্র্যাপ ফাংশন কলে সমস্ত ইনজেকটেবলগুলি ঘোষণা করতে হবে। এটি ছাড়া আপনার পরিষেবা কোনও ইনজেক্টেবল অবজেক্ট নয়।

bootstrap(MyAppComponent,[NameService]);

Comments

এই পুরোপুরি সঠিক নয়। আমরা বুটস্ট্রপ (), অথবা providersউপাদানগুলির কনফিগারেশন অবজেক্টে অ্যারেতে পরিষেবাটি অন্তর্ভুক্ত করতে পারি । যদি এটি providersঅ্যারেতে অন্তর্ভুক্ত থাকে তবে আমরা বাউন্ড উপাদান অনুসারে একটি উদাহরণ পাই। দেখুন হায়ারারকিকাল injectors আরও তথ্যের জন্য ডক।

— রাজকক

হ্যাঁ @ মারকরাজাককের বক্তব্য অনুসারে আমরা কেবল বুটস্ট্র্যাপের সময় সেই পরিষেবাগুলি সরবরাহ করি যা আমাদের পুরো অ্যাপ্লিকেশন জুড়ে ব্যবহার করতে হয়। এটি করে আমাদের প্রতিবার সরবরাহকারীর ইনজেকশন লাগবে না কারণ এটি প্রতিটি উপাদানগুলির জন্য উদাহরণ তৈরি করবে।

— পারদীপ জৈন

Answer 17

আপনার পরিষেবায় @ ইনজেক্টেবল যুক্ত করুন:

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

বা আপনি যদি অ্যাপ্লিকেশন জুড়ে আপনার পরিষেবা অ্যাক্সেস করতে চান তবে আপনি অ্যাপ্লিকেশন সরবরাহকারীর মাধ্যমে পাস করতে পারেন

Answer 18

ব্লককোট

কোনও উপাদান সরবরাহকারীদের নিবন্ধকরণ করা হচ্ছে

এখানে একটি সংশোধিত হিরোস কম্পোনেন্ট রয়েছে যা হিরো সার্ভিসকে তার সরবরাহকারী অ্যারেতে নিবন্ধভুক্ত করে।

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

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

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