So rufen Sie eine Ruhe-API beim Bootstrapping von angular 2 app auf

Wir würden gerne eine Ruhe-API aufrufen, wenn angular 2 app bootstrapped wird, ich meine, als erstes sollte es über die Anwendung tun, rufen Sie diese API auf und erhalten Sie einige Daten, die für die Anwendung benötigt werden.

Gibt es das überhaupt, um das zu erreichen? Ich sah folgenden Artikel, aber es war für Beta-Version von Angular 2 gedacht

Beispielcode basierend auf Angular 2 Beta oder RC

Lesen der Daten vor dem Start der App

Sie können APP_INITIALIZER verwenden , um eine Servicemethode beim Bootstrap aufzurufen. Sie müssen einen provider dafür in Ihrem AppModule .

Hier ist ein Beispiel, wie Sie dies tun können.

StartupService ( startup.service.ts )

 import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; @Injectable() export class StartupService { private _startupData: any; constructor(private http: Http) { } // This is the method you want to call at bootstrap // Important: It should return a Promise load(): Promise { this._startupData = null; return this.http .get('REST_API_URL') .map((res: Response) => res.json()) .toPromise() .then((data: any) => this._startupData = data) .catch((err: any) => Promise.resolve()); } get startupData(): any { return this._startupData; } } 

AppModul ( app.module.ts )

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule, APP_INITIALIZER } from '@angular/core'; import { StartupService } from './startup.service'; // ... // Other imports that you may require // ... export function startupServiceFactory(startupService: StartupService): Function { return () => startupService.load(); } @NgModule({ declarations: [ AppComponent, // ... // Other components & directives ], imports: [ BrowserModule, // .. // Other modules ], providers: [ StartupService, { // Provider for APP_INITIALIZER provide: APP_INITIALIZER, useFactory: startupServiceFactory, deps: [StartupService], multi: true } ], bootstrap: [AppComponent] }) export class AppModule { } 

EDIT ( So behandeln Sie Startup-Diensterrors ):

AppKomponente ( app.component.ts )

 import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { StartupService } from './startup.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { constructor(private router: Router, private startup: StartupService ) { } ngOnInit() { // If there is no startup data received (maybe an error!) // navigate to error route if (!this.startup.startupData) { this.router.navigate(['error'], { replaceUrl: true }); } } } 

Eine Sache, auf die ich mit der Antwort von Santanu gestoßen bin, ist, dass es nicht funktioniert, es sei denn, StartupService ist in den Providern vor dem APP_INITIALIZER . Mit Angular 4.x sieht der Anbieter in meinem Fall so aus:

  providers: [ UserService, { provide: APP_INITIALIZER, useFactory: userServiceFactory, deps: [UserService], multi: true } 

Hier ist ein Artikel, der APP_INITIALIZER viel ausführlicher erklärt und zeigt, wie eckig ihn benutzt.