[英]Angular2 “No provider for Service!” error when provider is added @NgModule
I have an app module and single component application (made to demonstrate my problem), and getting following error: 我有一个应用程序模块和单个组件应用程序(用于演示我的问题),并收到以下错误:
Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for UserService! ; Zone: <root> ; Task: Promise.then ; Value:
code for AppModule: 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 {
}
Code for my AppComponent: 我的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;
}
}
My UserService Code: 我的用户服务代码:
import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class UserService {
obs$: EventEmitter<any> = new EventEmitter<any>()
userName = 'Sherlock Holmes';
}
Now if i add UserService as provider to AppComponent, it will solve the issue. 现在,如果我将UserService作为提供者添加到AppComponent,它将解决问题。 but i dont want to, because i want only one instance of my service in whole application. 但我不想,因为我只想在整个应用程序中使用我的服务的一个实例。 Even in subModules(feature modules). 即使在subModules(功能模块)中也是如此。
according to my understanding, if i add service as provider on module level, then i can just inject it to any component under module. 根据我的理解,如果我在模块级别添加服务作为提供者,那么我可以将它注入模块下的任何组件。
here is am example i was watching. 这是我正在观看的例子。
am using angular2 version: "2.0.0" 我正在使用angular2版本:“2.0.0”
The import path is wrong: you use /Common
in one and /common
right below. 导入路径错误:您在下面的/common
和/common
右侧使用/Common
。
Visual Studio and WebStorm will not show IntelliSense errors for case-sensitivity of paths. 对于路径的区分大小写,Visual Studio和WebStorm不会显示IntelliSense错误。
Furthermore, if using Angular 5's AoT template compilation, you can get a "This component is not part of a module" error, even though it is, because the import path is incorrect. 此外,如果使用Angular 5的AoT模板编译,您可以获得“此组件不是模块的一部分”错误,即使它是,因为导入路径不正确。 Without AoT this will work, so you'll get a surprise when converting to AoT. 如果没有AoT,这将有效,因此转换为AoT时会有惊喜。
Remove your service: UserService
from app.module.ts
, then add in component
: 从app.module.ts
删除您的服务: UserService
,然后添加component
:
@Component({
selector: 'App',
template: `<h3>App component</h3>
user name: {{userName}}
`,
providers: [UserService]
})
Hope this will help you. 希望这会帮助你。
An additional reason for getting this error - I duplicated a service to a different directory and was updating each file individually. 出现此错误的另一个原因 - 我将服务复制到另一个目录并单独更新每个文件。 Even though the first file still existed I got this error until I updated app.module.ts. 即使第一个文件仍然存在,我得到此错误,直到我更新app.module.ts。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.