Angular2 RC5 ngModule：没有 NameService 的提供者

Posted 2023-02-23

【中文标题】Angular2 RC5 ngModule：没有 NameService 的提供者

【英文标题】：Angular2 RC5 ngModule: No Provider For NameService

【发布时间】：2016-12-20 01:38:47

【问题描述】：

我对 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 ,
             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 )
    

我看了很多次 angular doc 但我没有发现问题，谢谢你的帮助 ;-)

编辑：当我直接在我的组件中提供服务时，它是有效的，只将它提供到应用程序模块中不会。

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

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

我使用该配置进行更多的逻辑导入（导入整个应用程序而不是单个文件），这正是我的完美主义者的一面！ 因此，使用更常见的 systemjs 配置，一切都可以完美运行！

【问题讨论】：

一切看起来都差不多。请提供 plunker，因为在 rc5 之后很难从代码中找到错误。

奇怪的是它与 plunker 一起工作，我不明白为什么......这是code on plunker，你可以观察你的控制台并观察一个包含多个对象的日志，这就是 排名服务。我已经简化了代码（只有有问题的组件和服务）

【参考方案1】：

由提问者回答：

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

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

我使用该配置进行更多逻辑导入（导入整个应用程序而不是单个文件），这只是我的完美主义一面！因此，使用更常见的 systemjs 配置，一切都可以完美运行！