未処理プロミス拒否：HTTPServiceのプロバイダがありません

Question

私のアプリを最後のRCに移行していますが、修正できないエラーが発生しています。ここで質問することを決める前に、私はスルー検索をしましたが運がありませんでした。 SO

、以下べき負荷Aボタンを押す：ここ

componenetです：

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); 
    } 
} 

がモジュールはかなり基本的なものです：

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 { 
} 

ルーティング：

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

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


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

最後に、私が使用しているの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 { } 

は、私はこれをロードしようとしていたときに私が受けていますエラーです：

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

はあなたのために簡単なものになるだろうが、ここから..私は問題を見ることができません。 ありがとうございます。

Answer 1

を使用してプロバイダについてのあなたのコンポーネントを伝える必要があります。現在、あなたのサービスではなく、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 { } 

Answer 2

あなたは、あなたのapp.module輸入にごMainserverpageModuleを追加する必要が

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) { } 

}