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

回答

相關問題