web应用程序 – Angular2 RC5 ngModule：没有NameService的提供者

我对angular2服务有一点小问题.
我正在尝试使用ngModule提供程序选项提供服务,但是当我尝试将其添加到我的组件中时,我得到了：没有ServiceName的提供程序(此处为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 },name: 'Isabelle Isa' },correlation: 51 },name: 'Julien Sergent' },correlation: 39 },name: 'Paul Raul' },correlation: 23 },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 )
    }
}

我看了很多次角度文档,但我没有看到问题,谢谢你的帮助;-)

编辑：当我直接在我的组件中提供服务时,它是有效的,只提供给应用程序模块.

编辑2：我解决了我的问题,这是我的systemjs配置是错误的,或者更确切地说没有设想管理那种情况：我创建了自己的包(Twinipix)但我的应用程序不包含Twinipix文件夹而是公开文件夹,所以问题来自jspm.config.js文件：

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

我使用该配置进行更多的逻辑导入(导入整个应用程序而不是单个文件),这是我的完美主义者！
因此,使用更常见的systemjs配置,一切都完美无缺！

解决方法

问题提问人回答：

我解决了我的问题,这是我的systemjs配置错误,或者更确切地说没有设想管理那种情况：我创建了自己的包(Twinipix)但我的应用程序不包含Twinipix文件夹而是公共文件夹,这只是我的完美主义方面！因此,一切都完美无缺！

web应用程序 – Angular2 RC5 ngModule：没有NameService的提供者

解决方法

猜你在找的HTML相关文章