Angular2“没有服务提供者！”错误时添加提供商@NgModule

我有一个应用程序模块和单组分应用（做证明我的问题），并获得以下错误：Angular2“没有服务提供者！”错误时添加提供商@NgModule

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { UserService } from './components/common/userservice'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
], 
declarations: [ 
    AppComponent 
], 
providers: [UserService], 
bootstrap: [AppComponent], 
entryComponents: [] 

}) 
export class AppModule { 
}

代码：对的AppModule

Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for UserService! ; Zone: <root> ; Task: Promise.then ; Value:

代码我AppComponent：

import { Component} from '@angular/core'; 
import { UserService} from './userservice'; 

@Component({ 
    selector: 'App', 
    template: `<h3>App component</h3>                      
      user name: {{userName}} 
      `, 
    providers: [] 
    }) 

export class AppComponent { 

    userName: string; 
    constructor(userService: UserService) { 
     this.userName = userService.userName; 
    }  
}

我UserService代码：

import { Injectable, EventEmitter } from '@angular/core'; 
@Injectable() 
export class UserService { 
    obs$: EventEmitter<any> = new EventEmitter<any>() 
    userName = 'Sherlock Holmes'; 
}

现在，如果我添加UserService为供应商AppComponent，它会解决这个问题。但我不想，因为我只想在整个应用程序中使用我的服务的一个实例。即使在subModules（功能模块）中。

根据我的理解，如果我添加服务作为模块级供应商，那么我可以只是将其注入到任何组件下模块。

这是我正在看的例子。

Plunker

现在用angular2版本： “2.0.0”

来源

2016-12-14 Fazal Wahid

请发布您的'UserService';它是用'@Injectable（）'装饰的吗？（除非当然是Plunker的例子......） – msanford

另外，你的导入路径可能是错误的：你在下面的一个和'/ common'中使用'/ Common' ... – msanford

@msanford post updated，User服务添加。路径很好，因为导入的类出现在visual studio intellisense中。 –

进口路径是错误的：你在一个/common右下方使用/Common。

Visual Studio和WebStorm不会显示路径区分大小写的IntelliSense错误。

此外，如果采用了棱角分明5的AOT模板编译，你可以得到一个“此组件不是模块的一部分”的错误，即使它是，因为导入路径不正确。如果没有AoT，这将起作用，所以当转换为AoT时你会感到惊讶。

来源

2016-12-16 12:54:44 msanford

很烦人。花了我几个小时看桶和供应商设置，结果是桶服务的一个大小敏感问题。谢谢！ – GraemeMiller

删除您服务：UserService从app.module.ts，然后在component补充：

@Component({ 
    selector: 'App', 
    template: `<h3>App component</h3>                      
     user name: {{userName}} 
     `, 
    providers: [UserService] 
})

希望这会帮助你。

来源

2016-12-14 15:26:32

是的，因为你需要在'app.component.ts'（根组件）中注入你的**服务**'提供者：[UserService]'，它将在整个应用程序中可用。 –

正如我在帖子中提到的。我不想将其添加到组件提供程序。如果我将它添加到模块中，它应该被自动注入到组件中。 –

获取此错误的另一个原因 - 我将服务复制到不同的目录并单独更新每个文件。即使第一个文件仍然存在，我得到这个错误，直到我更新app.module.ts。

来源

2018-01-04 03:06:59

Angular2“没有服务提供者！”错误时添加提供商@NgModule

回答

相关问题