Come chiamare una pausa API durante l’avvio di angular 2 app

Vorremmo chiamare un’app di rest quando l’applicazione angular 2 viene riavviata, voglio dire che la prima cosa che dovrebbe fare sull’applicazione è chiamare questa API e ottenere alcuni dati richiesti per l’applicazione.

C’è comunque per raggiungere questo objective? Ho visto il seguente articolo, ma era pensato per la beta vewrsion di Angular 2

Codice di esempio basato su Angular 2 beta o rc

Lettura dei dati prima dell’avvio dell’app

È ansible utilizzare APP_INITIALIZER per chiamare un metodo di servizio in bootstrap. Dovrai definire un provider per questo nel tuo AppModule .

Ecco un esempio di come farlo.

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

AppModule ( 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 ( Come gestire l’errore del servizio di avvio ):

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

Una cosa che ho trovato usando la risposta fornita da Santanu è che non funzionerà a meno che StartupService non sia definito nei provider prima di APP_INITIALIZER . Utilizzando Angular 4.x , la parte relativa ai provider si presenta nel mio caso:

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

Ecco un articolo che spiega APP_INITIALIZER in modo molto più dettagliato e mostra anche quanto angular lo usi.