Кутовий немає провайдера для NameService

У мене проблема з завантаженням класу в кутовий компонент. Я давно намагався вирішити це; Я навіть намагався об'єднати це все в одному файлі. Що у мене є:

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.

Чи може хтось допомогти мені визначити проблему з моїм кодом?

Ви повинні використовувати providersзамістьinjectables

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

Повний зразок коду тут .

У Angular 2 є три місця, за якими можна надати послуги:

1. завантажувач
2. кореневий компонент
3. інші компоненти або директиви

"Опція постачальника завантажувальних програм призначена для налаштування та зміни власних попередньо зареєстрованих служб Angular, таких як його підтримка маршрутизації." - довідка

Якщо ви хочете лише один екземпляр NameService у всьому своєму додатку (тобто Singleton), додайте його до providersмасиву вашого кореневого компонента:

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

Plunker

Якщо ви хочете мати один екземпляр на компонент, використовуйте providersмасив в об'єкті конфігурації компонента:

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

Докладнішу інформацію див. У документі " Ієрархічні інжектори" .

Станом на кутову 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]
})

Ви повинні бути ін'єкційні NameServiceвсередині providersмасиву вашої AppModule«s 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 відповідь.

Шокуюче, що синтаксис ще раз змінився в останній версії Angular :-) Від Angular 6 dokcs :

Починаючи з Angular 6.0, кращим способом створення одиночних служб є вказівка ​​на сервісі, яку вона повинна надавати в корені програми. Це робиться шляхом встановлення наданого корінця на корінь на @Injectable декоратор служби:

src / app / user.service.0.ts

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

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

Ви повинні ввести NameService всередині масиву постачальників метаданих NgModule вашого AppModule.

@NgModule({
   providers: [MyService]
})

і переконайтеся, що імпортуйте ваш компонент з тим самим іменем (з урахуванням регістру), оскільки SystemJs залежить від регістру (за дизайном). Якщо ви використовуєте інше ім’я шляху у файлах проекту, як це:

main.module.ts

import { MyService } from './MyService';

your-компонент.ts

import { MyService } from './Myservice';

тоді System js зробить подвійний імпорт

У Angular v2 і вище це тепер:

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

Кутовий 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) і спочатку змусити його працювати там. Це все налаштує на вас. Як тільки він працює там, скопіюйте його в інше середовище і попросіть будь-які проблеми з цим середовищем.

Помилка No provider for NameService є поширеною проблемою, з якою стикаються багато початківців Angular2.

Причина : Перш ніж скористатися будь-якою спеціальною службою, спочатку потрібно зареєструвати її в NgModule, додавши її до списку постачальників:

Рішення:

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

Ви також можете мати вказані в команді bootstrap команди залежності:

bootstrap(MyAppComponent,[NameService]);

Принаймні, це те, що працювало для мене в альфа40.

це посилання: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0

Привіт, Ви можете використовувати це у своєму файлі .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> `   
    })

Додайте його до постачальників, які не вводять ін'єкцій

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

У Angular ви можете зареєструвати послугу двома способами:

1. Зареєструйте послугу в модулі або кореневому компоненті

Ефекти:

• Доступний для всіх компонентів
• Доступний у довічному застосуванні

Ви повинні подбати, якщо ви зареєструєте послугу в ледачому завантаженому модулі:

• Послуга доступна лише для компонентів, оголошених у цьому модулі

• Послуга буде доступна в застосуванні протягом усього життя лише тоді, коли модуль завантажений

2. Зареєструйте послугу в будь-якому іншому додатку

Ефекти:

• До компонента буде введено окремий екземпляр Служби

Ви повинні подбати, якщо ви зареєструєте послугу в будь-якому іншому компоненті програми

• Екземпляр введеної служби буде доступний лише для компонента та всіх його дітей.

• Екземпляр буде доступний протягом життя компонента.

Вам потрібно додати його до масиву постачальників, який включає всю залежність вашого компонента.

Подивіться на цей розділ у кутовій документації:

Реєстрація постачальників у складі

Ось переглянений HeroesComponent, який реєструє 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 використовується лише в межах функції Heroes і ніде більше, є сенс зареєструвати його в HeroesComponent.

Також див. "Чи слід додати провайдерів для додатків до кореневого AppModule або кореневого AppComponent?" у поширених запитаннях про NgModule.

Тож у вашому випадку просто поміняйте ін’єкційні засоби на таких постачальників:

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

Також у нових версіях Angular, @View та деяких інших наповненнях немає.

Для отримання додаткової інформації відвідайте тут .

додати свою послугу до масиву провайдерів [] у файл app.module.ts. Як і нижче

// тут моя послуга CarService

app.module.ts

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

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

Angular2 вимагає оголосити всі ін'єкційні елементи у виклику функції завантаження. Без цього ваша послуга не є об'єктом для ін'єкцій.

bootstrap(MyAppComponent,[NameService]);

Додайте @Injectable до вашої послуги як:

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

або якщо ви хочете отримати доступ до своєї послуги у всій програмі, ви можете передати її у постачальника програм

Блок-котирування

Реєстрація постачальників у складі

Ось переглянений HeroesComponent, який реєструє HeroService у масиві своїх постачальників.

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

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

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