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: 

코드

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 코드 :

내 AppComponent에 대한

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"

Answer 1

가져 오기 경로가 잘못되었습니다. 바로 아래에 /Common과 /common을 사용합니다.

Visual Studio 및 WebStorm은 경로의 대/소문자 구분에 IntelliSense 오류를 표시하지 않습니다.

또한 Angular 5의 AoT 템플릿 컴파일을 사용하는 경우 가져 오기 경로가 잘못 되었기 때문에 "이 구성 요소가 모듈의 일부가 아닙니다"라는 오류 메시지가 표시 될 수 있습니다. AoT가 없으면이 기능이 작동하므로 AoT로 전환하면 놀라움을 얻을 수 있습니다.

Answer 2

은 서비스를 제거 UserService이 app.module.ts에서, 다음 component에 추가 :

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

희망이 당신을 도울 것입니다.

Answer 3

이 오류가 발생하는 또 다른 이유 - 서비스를 다른 디렉토리에 복제하여 각 파일을 개별적으로 업데이트하고있었습니다. 첫 번째 파일이 여전히 존재하더라도 app.module.ts를 업데이트 할 때까지이 오류가 발생했습니다.