问题描述
我在angular2服务上遇到了一个小问题(大...).我正在尝试使用ngModule提供程序选项提供服务,但是当我尝试将其放入组件时,我得到了:没有ServiceName提供程序(此处为RankService).
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 ;-)
当我直接在组件中提供服务时,它是有效的,仅在应用程序模块中不提供服务.
When I provide service directly in my components, it's works, only provide it into app module doesn't.
我解决了我的问题,那是我的systemjs配置错了,或者不是想解决这种情况:我创建了自己的包(Twinipix),但是我的应用程序不包含Twinipix文件夹而是公用文件夹,所以问题出在jspm.config.js文件:
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"
};
我使用该配置进行了更多的逻辑导入(导入整个应用程序而不是单个文件),这只是我的完美主义者!因此,使用更常见的systemjs配置,所有功能都可以完美运行!
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!
推荐答案
提问者的答案:
我解决了我的问题,那是我的systemjs配置错了,或者根本没有考虑管理这种情况:我创建了自己的包(Twinipix),但是我的应用程序不包含Twinipix文件夹,而是公共的文件夹,因此问题来自jspm.config.js文件:
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"
};
我使用该配置进行了更多的逻辑导入(导入整个应用程序而不是单个文件),这只是我的完美主义者!因此,使用更通用的systemjs配置,所有功能都可以完美运行!
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!
这篇关于Angular2 RC5 ngModule:没有用于NameService的提供程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!