Angular2 "サービスの提供元がありません！"エラープロバイダが追加され@NgModule

Question

私はアプリモジュールと（私の問題を示すために作られた）単一のコンポーネントアプリケーションを持っている、となって次のエラー：

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'; 
} 

私がAppComponentにプロバイダとしてUserServiceを追加すると、問題が解決されます。しかし、私はしたくない、私はアプリケーション全体の私のサービスの1つだけのインスタンスが欲しいので。 subModules（フィーチャモジュール）でさえ。

私の理解によると、モジュールレベルのプロバイダとしてサービスを追加すると、モジュールの下のコンポーネントに注入することができます。

ここは私が見ていた例です。

Plunker

angular2バージョンを使用しています： "2.0.0"

Answer 1

インポートパスが間違っています：/Commonを1つに、/commonをすぐ下に使用します。

Visual StudioとWebStormは、パスの大文字と小文字を区別するためのIntelliSenseエラーを表示しません。

また、Angular 5のAoTテンプレートのコンパイルを使用すると、インポートパスが正しくないため、「このコンポーネントはモジュールの一部ではありません」というエラーメッセージが表示されることがあります。 AoTがなければこれはうまくいくので、AoTに変換すると驚きます。

Answer 2

はあなたのサービスを削除します。app.module.tsからUserServiceを、そしてcomponentに追加します。

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

希望これがお手伝いします。

Answer 3

このエラーが発生するもう1つの理由は、サービスを別のディレクトリに複製して、各ファイルを個別に更新することでした。最初のファイルがまだ存在していても、app.module.tsを更新するまではこのエラーが出ました。