javascript - Angular2 "No provider for Service!" error when provider is added @NgModule - Stack Overflow

admin管理员组

文章数量:1292300

I have an app module and single ponent 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:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { UserService } from './ponents/mon/userservice';

@NgModule({
    imports: [
    BrowserModule,
],
declarations: [
    AppComponent
],
providers: [UserService],
bootstrap: [AppComponent],
entryComponents: []

})
export class AppModule {
}

Code for my AppComponent:

import { Component} from '@angular/core';
import { UserService} from './userservice';

@Component({
  selector: 'App',
  template: `<h3>App ponent</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. but i dont want to, because i want only one instance of my service in whole application. Even in subModules(feature modules).

according to my understanding, if i add service as provider on module level, then i can just inject it to any ponent under module.

here is am example i was watching.

Plunker

am using angular2 version: "2.0.0"

I have an app module and single ponent 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:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { UserService } from './ponents/mon/userservice';

@NgModule({
    imports: [
    BrowserModule,
],
declarations: [
    AppComponent
],
providers: [UserService],
bootstrap: [AppComponent],
entryComponents: []

})
export class AppModule {
}

Code for my AppComponent:

import { Component} from '@angular/core';
import { UserService} from './userservice';

@Component({
  selector: 'App',
  template: `<h3>App ponent</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. but i dont want to, because i want only one instance of my service in whole application. Even in subModules(feature modules).

according to my understanding, if i add service as provider on module level, then i can just inject it to any ponent under module.

here is am example i was watching.

Plunker

am using angular2 version: "2.0.0"

• javascript
• angular
• typescript
• angular2-modules

Share Improve this question Follow edited Dec 14, 2016 at 16:00 Fazal Wahid asked Dec 14, 2016 at 15:19 Fazal WahidFazal Wahid 17522 silver badges1717 bronze badges 5

• Please post your UserService; is it decorated with @Injectable()? (Unless it's exactly what's in the example Plunker of course...) – msanford Commented Dec 14, 2016 at 15:24
• Also, your import path might be wrong: you use /Common in one and /mon right below... – msanford Commented Dec 14, 2016 at 15:25
• 1 @msanford post updated, User service added. paths are fine,as imported classes are appearing in visual studio intellisense. – Fazal Wahid Commented Dec 14, 2016 at 16:07
• 1 @msanford your were right actually. path is case sensitive. Visaul studio accepts it but it wont work in application. you can post answer so that i can mark it as answer. – Fazal Wahid Commented Dec 16, 2016 at 9:35
• Done! Also, that's annoying. The whole purpose of using IDEs is to find stuff like this for you. I've had good success with Webstorm, if that's an option. – msanford Commented Dec 16, 2016 at 12:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

The import path is wrong: you use /Common in one and /mon right below.

Visual Studio and WebStorm will not show IntelliSense errors for case-sensitivity of paths.

Furthermore, if using Angular 5's AoT template pilation, you can get a "This ponent is not part of a module" error, even though it is, because the import path is incorrect. Without AoT this will work, so you'll get a surprise when converting to AoT.

Remove your service: UserService from app.module.ts, then add in ponent:

@Component({
  selector: 'App',
  template: `<h3>App ponent</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.

本文标签： javascriptAngular2 quotNo provider for Servicequot error when provider is added NgModuleStack Overflow