Angular2 RC5 ngModule: no provider for NameService

Question

I have a small (big problem) with angular2 services. I am trying to provide services with ngModule provider options, but when I try to get it in my components, I got: There is no provider for ServiceName (here, RankingService).

app.module.ts

import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { FormsModule } from '@angular/forms' import { HttpModule } from '@angular/http' /* * App component and routing */ import { AppComponent } from './components/app/app.component' import { routing } from './app.routes' /* * Services */ import { UserService } from './services/user.service' import { RankingService } from './services/ranking.service' /* * Global components */ import { HeaderComponent } from './components/header/header.component' import { FooterComponent } from './components/footer/footer.component' /* * App Components */ import { RankingComponent } from './components/ranking/ranking.component' import { OthersComponent } from './components/others/others.component' import { IpixsComponent } from './components/ipix/ipixs.component' import { IpixDetailsComponent } from './components/ipix/ipix-details/ipix-details.component' @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, routing ], declarations: [ AppComponent, HeaderComponent, FooterComponent, RankingComponent, OthersComponent, IpixsComponent, IpixDetailsComponent ], providers: [ UserService, RankingService ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 

ranking.service.ts

 import { Injectable } from '@angular/core' /* * Entities */ import { RankingUser } from './../entities/ranking-user' @Injectable() export class RankingService { getRanking() { const users: RankingUser[] = [ { user: { picture : '', name: 'Edwige Chou' }, correlation: 100 }, { user: { picture : '', name: 'Mathieu Vandeginste' }, correlation: 78 }, { user: { picture : '', name: 'Isabelle Isa' }, correlation: 51 }, { user: { picture : '', name: 'Julien Sergent' }, correlation: 39 }, { user: { picture : '', name: 'Paul Raul' }, correlation: 23 }, { user: { picture : '', name: 'Johnatan' }, correlation: 17 } ] return users } } 

ranking.component.ts

 /* * Dependencies */ import { Component, OnInit } from '@angular/core' /* * Services */ import { RankingService } from './../../services/ranking.service' /* * Entities */ import { RankingUser } from './../../entities/ranking-user' @Component({ moduleId: module.id, selector: 'ranking', templateUrl: 'ranking.component.html', styleUrls: [ 'ranking.component.css' ] }) export class RankingComponent implements OnInit { ranking: RankingUser[] constructor( private rankingService: RankingService ) { } ngOnInit() { this.getRanking() } getRanking() { this.ranking = this.rankingService.getRanking() console.log( this.ranking ) } } 

I searched angular doc many times, but I see no problem, thanks for your help; -)

Edit: when I provide a service directly in my components, it works, only it can be added to the application module.

Edit 2: I solved my problem, it was my system configuration, which was incorrect or, rather, was not designed to manage this situation: I created my own package (Twinipix), but my application does not contain the Twinipix folder, but rather in the shared folder , so the problem arose from the jspm.config.js file:

 packages[ "Twinipix" ] = { main: "../public/main.js" }; 

I used this configuration to do more logical imports (import the whole application, not just one file), it's just my perfectionist side! Thus, with a more general systemjs configuration, everything works just fine!

Answer 1

The answer to the question:

I solved my problem, it was my systemjs configuration, which was incorrect or, rather, was not designed to manage this situation: I created my own package (Twinipix), but my application does not contain a Twinipix folder, but rather a public one, so the problem arose from jspm.config.js file:

 packages[ "Twinipix" ] = { main: "../public/main.js" }; 

I used this configuration to make more logical imports (import the whole application, not just one file), this is just my perfectionist side! Thus, with a more general systemjs configuration, everything works just fine!