私はangular2サービスには小さな(大きな...)問題があります。 私はngModuleプロバイダオプションを使ってサービスを提供しようとしていますが、コンポーネントに取得しようとするとServiceName(ここではRankingService)のプロバイダがありません。Angular2 RC5 ngModule:NameServiceのプロバイダがありません
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)
}
}
私は何度も角度のある書類を見ましたが、問題は表示されません。ご協力ありがとうございます;-)
編集:私のコンポーネントに直接サービスを提供すると、機能し、アプリケーションモジュールにのみ提供します。 t。
編集2:自分の問題を解決しました。システム構成が間違っていたり、そのような状況を管理していないというシステム構成でした。私自身のパッケージ(Twinipix)を作成しましたが、私のアプリケーションにTwinipixフォルダではなく、パブリックフォルダ、問題がjspm.config.jsファイルから来たので:
packages[ "Twinipix" ] = {
main: "../public/main.js"
};
は、私はより論理的な輸入は(アプリケーション全体ではなく、単一のファイルをインポート)を実行するために、その構成を使用し、それはジュスト私の完璧主義者です側! より一般的なsystemjs設定では、すべてが完璧に動作します!質問アスカーによって回答
すべては大丈夫です。 rc5の後のコードからバグを見つけるのは非常に難しいので、plunkerを提供してください。 – micronyks
奇妙なことに、それはプランカで動作しますが、私はなぜ理解していません... これは[コードのplunker](https://plnkr.co/edit/Uhf2z23bVDOaE9nVW4yO?p=preview)、あなたのコンソールを見て、複数のオブジェクトが内部にあるログは、** RankingService **からの戻り値です。 私はコードを単純化しました(問題のあるコンポーネントとサービスのみ) –