Angular2"没有服务提供商!" 添加提供程序@NgModule时出错

我有一个应用程序模块和单个组件应用程序(用于演示我的问题),并收到以下错误:

 Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for UserService! ; Zone:  ; 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: `
App component
                                                                                      
            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 = new EventEmitter()
    userName = 'Sherlock Holmes';
}

现在,如果我将UserService作为提供者添加到AppComponent,它将解决问题.但我不想,因为我只想在整个应用程序中使用我的服务的一个实例.即使在subModules(功能模块)中也是如此.

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

这是我正在观看的例子.

Plunker

我正在使用angular2版本:"2.0.0"

导入路径错误:您/Common在/common下面的一个和右下方使用.

对于路径的区分大小写,Visual Studio和WebStorm不会显示IntelliSense错误.

此外,如果使用Angular 5的AoT模板编译,您可以获得"此组件不是模块的一部分"错误,即使它是,因为导入路径不正确.如果没有AoT,这将有效,因此转换为AoT时会有惊喜.