Angular2 RC5 ngModule: No Provider For NameService

Question

I've a small (big...) problem with angular2 services. I'm trying to provide services with ngModule providers options, but when I try to get it into my components I got : 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 looked many times angular doc but I don't see the problem, thank you for your help ;-)

Edit: When I provide service directly in my components, it's works, only provide it into app module doesn't.

Edit 2: I solved my problem, it was my systemjs configuration which was wrong, or rather not conceived to manage that kind of situation: I've created my own package (Twinipix) but my application doesn't contain Twinipix folder but rather public folder, so the problem came from jspm.config.js file:

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

I used that configuration to do more logical imports (import the entire application and not a single file), it's juste my perfectionist side! So, with a more common systemjs configuration, all works perfectly!

Answer 1

Answered by the question asker:

I solved my problem, it was my systemjs configuration which was wrong, or rather not conceived to manage that kind of situation: I've created my own package (Twinipix) but my application doesn't contain Twinipix folder but rather public folder, so the problem came from jspm.config.js file:

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

I used that configuration to do more logical imports (import the entire application and not a single file), it's just my perfectionist side! So, with a more common systemjs configuration, all works perfectly!