Angular没有NameService提供程序


325

我在将类加载到Angular组件时遇到问题。我已经尝试解决很长时间了;我什至尝试将它们全部合并到一个文件中。我所拥有的是:

应用程序

/// <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);

services / 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

有人可以协助我找出我的程式码问题吗?


6
从Alpha 42开始:@Component({provider:[NameService]})
timmz 2015年

Answers:


470

您必须使用providers而不是injectables

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

在此处完成代码示例


7
@unobf的导入语句对我来说似乎不完整。对于angular2库的旧版alpha,先前的答案可能是正确的。原始指南指的是alpha-28,我使用alpha35。此外,我提供了指向完整代码示例的链接,因此,我想我已经提供了很多信息。
克拉斯·梅尔本

4
面向未来的Google员工的更新:使用providers适用于最新Beta(beta 0)的作品。
nathanhleung 2015年

@nathanhleung绑定和提供程序都起作用-是临时的还是内部进行相同的操作
Simon_Weaver

@Simon_Weaver嗯,他们可能已在最新Beta中对其进行了更改-在beta.0中,我无法使用它bindings
nathanhleung

1
如果该服务是从另一个服务中使用的呢?我将其添加到模块提供商中,我认为这会使其在全球范围内可用,但仍会收到该错误
Sonic Soul

79

在Angular 2中,可以在三个位置“提供”服务:

  1. 引导程序
  2. 根成分
  3. 其他组件或指令

“引导程序提供程序选项旨在配置和覆盖Angular自己的预注册服务,例如其路由支持。” - 参考

如果只希望在整个应用程序中使用NameService的一个实例(即Singleton),则将其包含在providers根组件的数组中:

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

Plunker

如果您希望每个组件有一个实例,请改用providers组件的配置对象中的数组:

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

有关更多信息,请参见“ 分层注射器”文档。


4
这是一个很好的答案。它进一步说明了在根组件中声明服务与在其他子组件中声明服务之间的区别。
塔夫

33

从Angular 2 Beta开始:

以以下方式添加@Injectable到您的服务中:

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

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

    getNames() {
        return this.names;
    }
}

并在您的组件配置中添加providersas:

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

22

你应该注射NameService里面providers你的阵列AppModuleNgModule元数据。

@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.shared.ts中添加服务:提供程序:[DataManagerService],但仍然出现错误:错误:DataManagerService没有提供程序!
保罗

1
@Paul您是否将服务注入正确的模块?并DataManagerService@Injectable装饰器吗?
Pankaj Parkar

15

令人震惊的是,在最新版本的Angular中,语法再次发生了变化:-)从Angular 6 docs中

从Angular 6.0开始,创建单例服务的首选方法是在服务上指定应在应用程序根目录中提供的服务。这是通过将providerIn设置为服务的@Injectable装饰器上的根来完成的:

src / app / user.service.0.ts

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

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

14

您应该将NameService注入AppModule的NgModule元数据的provider数组内。

@NgModule({
   providers: [MyService]
})

并确保以相同的名称导入您的组件(区分大小写),因为SystemJs区分大小写(根据设计)。如果您在项目文件中使用不同的路径名,如下所示:

main.module.ts

import { MyService } from './MyService';

您的component.ts

import { MyService } from './Myservice';

然后System js将进行双重导入


1
优秀的!使用桶对进口进行分组时,遇到了此错误。您的SystemJS提示对我有所帮助:)
乔尼·阿当密特

12

在Angular v2及更高版本中,它现在是:

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


7

Angular 2已经更改,这是您的代码顶部的外观:

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

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

另外,您可能希望在服务中使用getter和setter:

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)插件,并使其首先在其中工作。它将为您设置一切。一旦在那里工作,就将其复制到您的其他环境中,并对该环境的所有问题进行分类。


6

该错误No provider for NameService是许多Angular2初学者面临的常见问题。

原因:在使用任何自定义服务之前,您首先必须通过将其添加到提供程序列表中来向NgModule注册:

解:

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


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


3

在Angular中,您可以通过两种方式注册服务:

1.在模块或根组件中注册服务

效果:

  • 适用于所有组件
  • 可终身使用

如果将服务注册到延迟加载的模块中,则应小心:

  • 该服务仅适用于在该模块中声明的组件

  • 仅当模块加载后,该服务才可在生命周期应用程序上使用

2.将服务注册到任何其他应用程序组件中

效果:

  • 将服务的单独实例注入组件

如果将服务注册到任何其他应用程序组件中,则应注意

  • 注入服务的实例将仅在组件及其所有子组件中可用。

  • 该实例将在组件生命周期内可用。


2

您需要将其添加到providers数组,其中包括组件上的所有依赖关系。

请看角度文档中的这一部分:

在组件中注册提供者

这是修改后的HeroesComponent,它在其provider数组中注册了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和其他一些东西也消失了。

有关更多信息,请访问此处


2

将您的服务添加到app.module.ts文件中的provider []数组中。像下面

//这里的服务是CarService

app.module.ts

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

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

1

Angular2要求您在引导函数调用中声明所有可注入对象。没有此服务,您的服务将无法注入。

bootstrap(MyAppComponent,[NameService]);

1
这不是很正确。我们可以将服务包含在bootstrap()或providers组件的配置对象的数组中。如果它包含在providers数组中,则每个绑定组件将获得一个实例。有关更多信息,请参见“ 分层注射器”文档。
Mark Rajcok

是的,正如@MarkRajcok所说,我们也仅在引导时提供在整个应用程序中必须使用的那些服务。通过这样做,我们不需要每次都在提供程序中进行注入,因为它将为每个组件创建实例。
Pardeep Jain

1

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

或者,如果您想访问整个应用程序中的服务,则可以传入应用程序提供商


1

块引用

在组件中注册提供者

这是修改后的HeroesComponent,它在其provider数组中注册了HeroService。

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

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

@Component({
  selector: 'my-heroes',
  providers: [HeroService],
  template: `
  `
})
export class HeroesComponent { }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.