Angular2 RC5 ngModule：沒有供應商名稱服務

我有一個小（大...）問題與angular2服務。我試圖提供ngModule提供商選項的服務，但是當我試圖把它拿到我的組件中時，我得到了：沒有ServiceName（這裏是RankingService）的提供者。Angular2 RC5 ngModule：沒有供應商名稱服務

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) 
    } 
}

我看了很多次角度文檔，但我沒有看到問題，謝謝你的幫助;-)

編輯：當我直接在我的組件提供服務，它的工作原理，只提供它到應用程序模塊doesn'噸。

編輯2：我解決了我的問題，這是我的systemjs配置錯了，或者沒有設想管理這種情況：我創建了自己的包（Twinipix），但是我的應用程序不包含Twinipix文件夾，而是公共文件夾，所以這個問題從jspm.config.js文件傳來：

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

我使用的配置做多邏輯進口（導入整個應用程序，而不是一個單一的文件），它的中庸之道我的完美主義者側！因此，使用更常見的systemjs配置，一切都完美無缺！

來源

2016-08-13 Julien Sergent

一切看起來幾乎沒問題。請提供plunker，因爲在rc5之後很難找到代碼中的錯誤。 – micronyks

奇怪的是，它與蹲跳者一起工作，我不明白爲什麼...... 這[[plunker上的代碼]]（https://plnkr.co/edit/Uhf2z23bVDOaE9nVW4yO?p=preview），你可以看你的控制檯，並觀察在裏面記錄多個對象，這就是** RankingService **的返回。我簡化了代碼（只有問題的組件和服務） –

通過提問題的回答：

我解決我的問題，這是我systemjs配置這是錯誤的，或者說不是設想來管理那種情況：我已經創建了自己的包（Twinipix ），但我的應用程序不包含Twinipix文件夾，而是公共文件夾，所以這個問題從jspm.config.js文件傳來：

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

我使用的配置做多邏輯進口（導入整個應用程序，而不是一個文件），這只是我完美主義的一面！因此，使用更常見的systemjs配置，所有功能都完美無缺！

來源

2017-04-01 11:36:35 snorkpete

Angular2 RC5 ngModule：沒有供應商名稱服務

回答

相關問題