Angular нет провайдера для 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.

Может ли кто-нибудь помочь мне определить проблему с моим кодом?

Ответы

Ответ 2

В Angular 2 есть три места, которые вы можете "предоставить":

  • самозагрузки
  • корневой компонент
  • другие компоненты или директивы

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

Если вам нужен только один экземпляр NameService для всего вашего приложения (т.е. Singleton), включите его в массив providers вашего корневого компонента:

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

Plunker

Если вы предпочитаете использовать один экземпляр для каждого компонента, используйте массив providers в объекте конфигурации компонента:

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

Подробнее см. Иерархические инжекторы для получения дополнительной информации.

Ответ 3

По состоянию на Angular 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]
})

Ответ 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, как принято @Klass показан ответ.

Ответ 5

Вы должны вводить NameService внутри массива поставщиков ваших метаданных AppModule NgModule.

@NgModule({
   providers: [MyService]
})

и убедитесь, что импорт в вашем компоненте с одинаковым именем (с учетом регистра), потому что SystemJs чувствителен к регистру (по дизайну). Если вы используете другое имя пути в файлах проекта, например:

main.module.ts

import { MyService } from './MyService';

ваш-component.ts

import { MyService } from './MyService';

то System js сделает двойной импорт

Ответ 6

В Angular v2 и выше:

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

Ответ 7

Шокирующе, синтаксис снова изменился в последней версии Angular :-) Из документов Angular 6:

Начиная с Angular 6.0, предпочтительным способом создания одноэлементных сервисов является указание для сервиса того, что он должен быть предоставлен в корне приложения. Это можно сделать, установив предоставляемый параметр root в сервисе @Injectable decorator:

SRC/приложение /user.service.0.ts

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

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

Ответ 8

Angular 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) планшет и заставить его работать там первым. Он все устроит для вас. После того, как он работает там, скопируйте его в другую среду и разделите все проблемы с этой средой.

Ответ 9

Ошибка " No provider for NameService - это распространенная проблема, с которой сталкиваются многие начинающие пользователи Angular2.

Причина: перед использованием любой пользовательской службы сначала необходимо зарегистрировать ее в NgModule, добавив в список поставщиков:

Решение:

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

Ответ 10

Вы также можете иметь зависимости, объявленные в команде bootstrap, например:

bootstrap(MyAppComponent,[NameService]);

По крайней мере, то, что сработало для меня в альфа40.

это ссылка: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0

Ответ 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> `   
    })

Ответ 12

Добавьте его к провайдерам не для инъекций

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

Ответ 13

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

Посмотрите на этот раздел в документации angular:

Регистрация поставщиков в компоненте

Здесь пересмотренный 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 или root AppComponent?" в FAQ NgModule.

Итак, в вашем случае просто измените инъекции на поставщиков, как показано ниже:

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

Также в новых версиях Angular, @View и некоторых других материалах пропало.

Для получения дополнительной информации посетите здесь.

Ответ 14

Angular2 требует, чтобы вы объявили все инъекции в вызове функции загрузки. Без этого ваша служба не является инъекционным объектом.

bootstrap(MyAppComponent,[NameService]);

Ответ 15

Добавьте @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]
})

или если вы хотите получить доступ к своей службе по всему приложению, которое вы можете передать в приложении-провайдере

Ответ 16

добавьте свою службу в каталог поставщиков [] в файле app.module.ts. Как ниже

//здесь моя служба CarService

app.module.ts

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

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

Ответ 17

В Angular вы можете зарегистрировать сервис двумя способами:

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

Последствия:

  • Доступно во всех компонентах
  • Доступно на пожизненное приложение

Вам следует позаботиться, если вы зарегистрируете сервис в загруженном модуле:

  • Сервис доступен только для компонентов, объявленных в этом модуле.

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

2. Зарегистрируйте сервис в любом другом компоненте приложения.

Последствия:

  • Будет введен отдельный экземпляр Сервиса в компонент

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

  • Экземпляр внедренной службы будет доступен только компоненту и всем его дочерним элементам.

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

Ответ 18

Blockquote

Регистрация провайдеров в компоненте

Здесь пересмотренный HeroesComponent, который регистрирует HeroService в своем массиве провайдеров.

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

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

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