2016-08-13 7 views
8

私は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設定では、すべてが完璧に動作します!質問アスカーによって回答

+2

すべては大丈夫です。 rc5の後のコードからバグを見つけるのは非常に難しいので、plunkerを提供してください。 – micronyks

+0

奇妙なことに、それはプランカで動作しますが、私はなぜ理解していません... これは[コードのplunker](https://plnkr.co/edit/Uhf2z23bVDOaE9nVW4yO?p=preview)、あなたのコンソールを見て、複数のオブジェクトが内部にあるログは、** RankingService **からの戻り値です。 私はコードを単純化しました(問題のあるコンポーネントとサービスのみ) –

答えて

0

:私は私自身のパッケージを作成した(Twinipix:私は私の問題を解決し

が、それは間違っている、というかいない状況のようなものを管理するために考案された私のsystemjs構成でした)しかし、私のアプリケーションはTwinipixフォルダではなく、パブリックフォルダが含まれていないので、問題はjspm.config.jsファイルから来た:私は(アプリケーション全体をインポートしていない複数の論理輸入を行うには、その構成を使用

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

1つのファイル)、それは私の完璧主義者の側です!したがって、より一般的なシステム構成では、すべてが完璧に動作します!

関連する問題