アプリを最新のRC版に移行しており、修正できないエラーが発生しています。ここで質問する前に、私は徹底的な検索を行いましたが、運がありませんでした。
したがって、ボタンを押すと、次のコードが読み込まれます。
これがコンポーネントです:
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未処理のPromise拒否:HTTPServiceのプロバイダーがありません! ;ゾーン:angular;タスク:Promise.then;値:NoProviderError {__zone_symbol__error:Error:DI Error at NoProviderError.ZoneAwareError( http:// localhost:4200/vendor.bundle。 js:8714 :…、_nativeError:ZoneAwareError、keys:Array [1]、インジェクター:Array [1]、__ zone_symbol__message: "No Provider for HTTPService!"…} __ zone_symbol__error:Error:DI Error at NoProviderError.ZoneAwareError
簡単なことかもしれませんが、ここからは問題を確認できません。ありがとうございました。
MainserverpageModule
をapp.module
インポートに追加する必要があります。現在、MainServerPage
componentのみが含まれており、サービスは含まれていません。
@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 { }
使用しているプロバイダーについてコンポーネントに通知する必要があります
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) { }
}