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

web应用程序 – Angular2 RC5 ngModule:没有NameService的提供者,第1张

概述我对angular2服务有一点小问题. 我正在尝试使用ngModule提供程序选项提供服务,但是当我尝试将其添加到我的组件中时,我得到了:没有ServiceName的提供程序(此处为RankingService). app.module.ts import { NgModule } from '@angular/core'import { BrowserModule } f 我对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.@R_404_6832@',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配置,一切都完美无缺!

解决方法@H_502_28@ 问题提问人回答:

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

总结

以上是内存溢出为你收集整理的web应用程序 – Angular2 RC5 ngModule:没有NameService的提供者全部内容,希望文章能够帮你解决web应用程序 – Angular2 RC5 ngModule:没有NameService的提供者所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1135091.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存