Angular2“没有服务提供者！”添加提供程序时出错@NgModule答案

【问题标题】：Angular2 "No provider for Service!" error when provider is added @NgModuleAngular2“没有服务提供者！”添加提供程序时出错@NgModule
【发布时间】：2026-01-05 21:40:01
【问题描述】：

我有一个应用程序模块和单组件应用程序（用于演示我的问题），并收到以下错误：

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

AppModule 代码：

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

我的 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;   
  }    
}

我的用户服务代码：

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

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

根据我的理解，如果我在模块级别添加服务作为提供者，那么我可以将它注入到模块下的任何组件中。

这是我正在观看的示例。

Plunker

我正在使用 angular2 版本：“2.0.0”

【问题讨论】：

请发布您的UserService；是用@Injectable() 装饰的吗？（当然，除非它正是 Plunker 示例中的内容......）
另外，您的导入路径可能是错误的：您使用/Common 和/common 正下方...
@msanford 帖子已更新，已添加用户服务。路径很好，因为导入的类出现在 Visual Studio intellisense 中。
@msanford 实际上你是对的。路径区分大小写。 Visaul 工作室接受它，但它不会在应用程序中工作。您可以发布答案，以便我可以将其标记为答案。
完成！另外，这很烦人。使用 IDE 的全部目的是为您找到类似的东西。如果可以的话，我在 Webstorm 上取得了很好的成功。

标签： javascript angular typescript angular2-modules

【解决方案1】：

导入路径错误：你使用/Common在一个和/common下面。

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

此外，如果使用 Angular 5 的 AoT 模板编译，您可能会收到“此组件不是模块的一部分”错误，即使是，因为导入路径不正确。如果没有 AoT，这将起作用，因此在转换为 AoT 时您会感到惊讶。

【讨论】：

太烦人了。我花了几个小时查看桶和提供程序设置，结果证明这是桶中服务的区分大小写的问题。谢谢！

【解决方案2】：

从app.module.ts 中删除您的服务：UserService，然后添加component：

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

希望这会对你有所帮助。

【讨论】：

是的，为此您必须将您的服务 providers: [UserService] 注入app.component.ts（根组件），这将在您的整个应用程序中可用。
正如我在帖子中提到的。我不想将它添加到组件提供程序。如果我在模块中添加它，它应该自动注入到组件中。

【解决方案3】：

出现此错误的另一个原因 - 我将服务复制到不同的目录并单独更新每个文件。即使第一个文件仍然存在，在我更新 app.module.ts 之前我还是收到了这个错误。

【讨论】：