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：没有供应商名称服务

回答

相关问题