typescript 未处理的承诺拒绝：没有 HTTPService 的提供者

Unhandled Promise rejection: No provider for HTTPService

提问by raz dame

I am migrating my app to the latest RC and am getting some errors that I cannot fix. Before deciding to ask here I made a thorough search but without any luck.

我正在将我的应用程序迁移到最新的 RC，但遇到了一些我无法修复的错误。在决定在这里问之前，我进行了彻底的搜索，但没有任何运气。

So, when pressing a button the following should load:

因此，当按下按钮时，应加载以下内容：

Here is the component:

这是组件：

import { Component,OnInit } from '@angular/core';

import { HTTPService } from '../shared/api.service';
import { Server } from './server.model';
import { SharedService } from '../shared/moveData.service';


@Component({
    templateUrl: './mainserverpage.template.html',
})
export class MainServerPage implements OnInit {

    constructor(private _httpService: HTTPService, 
                private _moveData: SharedService) { }

    errorMessage: string;
    public servers: Server[];
    isLoading = true;
    tillLoading;
    selectedServer: Server;
    currentServer;
    isServerOnline=false;

    ngOnInit() {
          this.getServers('qa');
    }

    reloadServers(env) {
        this.servers = null;

        this.getServers(env);
    }

    getServers(env?) {
        this._httpService.getServers(env)
            .subscribe(
            value => {
                this.servers = value;
                this.isLoading = false;
            },
            error => this.errorMessage = <any>error);
    }
}

The moduleis pretty basic:

该模块非常基础：

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common';
import { HttpModule }          from '@angular/http';

import { SharedModule }        from '../shared/shared.module';

import { MainServerPage }      from './mainserverpage.component';
import { Server }         from './server.model';
import {HTTPService} from '../shared/api.service';

@NgModule({
    imports: [
        CommonModule,
        SharedModule,
        HttpModule,
    ],
    declarations: [
        MainServerPage
    ],
    exports: [
        MainServerPage
    ],
    providers: [
        HTTPService
    ]
})
export class MainserverpageModule {
}

The routing:

该路由：

import { RouterModule  }     from '@angular/router';

import { MainServerPage }    from './mainserverpage.component';


export const mainRouting = RouterModule.forChild([
    { path: 'mainserverpage', component: MainServerPage }
]);

And finally the app.modulethat I am using. I see no sense in adding the template.

最后是我正在使用的app.module。我认为添加模板没有意义。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { SharedModule } from '../app/shared/shared.module';
import { MainserverpageModule } from '../app/servers/mainserverpage.module';

import { HomeComponent }     from './home.component';
import { NavBarComponent }   from './navbar.component';
import { NotFoundComponent } from '../app/shared/notfound.component';
import { MainServerPage } from '../app/servers/mainserverpage.component';

import { routing }           from './app.routing';
import { mainRouting } from '../app/servers/mainserverpage.routing';

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    HomeComponent,
    NotFoundComponent,
    MainServerPage
  ],
  imports: [
    BrowserModule,
    FormsModule,
      HttpModule,
    SharedModule,
    routing,
    mainRouting
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is the error that I am receiving when I am trying to load this:

这是我在尝试加载时收到的错误：

zone.js:420 Unhandled Promise rejection: No provider for HTTPService! ; Zone: angular ; Task: Promise.then ; Value: NoProviderError {__zone_symbol__error: Error: DI Error at NoProviderError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:87143:…, _nativeError: ZoneAwareError, keys: Array[1], injectors: Array[1], __zone_symbol__message: "No provider for HTTPService!"…}__zone_symbol__error: Error: DI Error at NoProviderError.ZoneAwareError

zone.js:420 未处理的承诺拒绝：没有 HTTPService 的提供者！; 区域：角度；任务：Promise.then；值：NoProviderError {__zone_symbol__error：错误：DI 错误在 NoProviderError.ZoneAwareError ( http://localhost:4200/vendor.bundle.js:87143:..., _nativeError: ZoneAwareError, 键: Array[1], injectors: Array[1] , __zone_symbol__message: "No provider for HTTPService!"...}__zone_symbol__error: 错误: NoProviderError.ZoneAwareError 处的 DI 错误

Could be something simple for you but from here I can't see the problem. Thank you.

对你来说可能很简单，但从这里我看不到问题。谢谢你。

回答by DGarvanski

You need to add your MainserverpageModuleto your app.moduleimports. Currently you've only included the MainServerPagecomponent and not your service.

您需要将您的添加MainserverpageModule到您的app.module导入中。目前，您只包含了MainServerPage组件，而没有包含您的服务。

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    HomeComponent,
    NotFoundComponent
    //Remove the component
  ],
  imports: [
    BrowserModule,
    MainserverpageModule <-- Add the module
    FormsModule,
    HttpModule,
    SharedModule,
    routing,
    mainRouting
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

回答by Ali Baig

You need to tell your component about the providers using

您需要告诉您的组件有关使用的提供程序

import { SharedService } from '../shared/moveData.service';

@Component({
    templateUrl: './mainserverpage.template.html',
    providers: [SharedService]   <= inject your services here
})
export class MainServerPage implements OnInit {

    constructor(private _httpService: HTTPService, 
                private _moveData: SharedService) { }

}