Angularjs2 – configurazione del server di precaricamento prima dell’avvio dell’applicazione

Sto lavorando con Angular2 RC5. Vorrei poter caricare l’indirizzo IP del mio server e alcuni altri parametri di configurazione prima dell’avvio dell’app. Come posso farlo nell’ultimo RC5?

Ho visto altri articoli, ma non sono utili:

  1. Come precaricare un file di configurazione in angular2 : la risposta qui fornita è specifica per il webpack. Sto usando systemjs.
  2. https://medium.com/@hasan.hameed/reading-configuration-files-in-angular-2-9d18b7a6aa4#.m8lontnas : questo è per la versione precedente di Angular2. Alcune delle classi utilizzate sono deprecate.

Qualsiasi aiuto sarebbe molto apprezzato.

modificare

Ho provato a utilizzare APP_INITIALIZER come segue nel mio app.module.ts:

import { NgModule, provide, APP_INITIALIZER } from "@angular/core"; import { ConfigService } from "./shared/services/config.service"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, routes, FormsModule, HttpModule], providers: [AuthService, Title, appRoutingProviders, ConfigService], bootstrap: [AppComponent , provide(APP_INITIALIZER, { useFactory: (config: ConfigService) => () => config.load(), deps: [ConfigService], multi: true })] }) export class AppModule { } 

Questo è il mio file config.service.ts:

  import { Config } from "../model/config"; export class ConfigService { constructor() { } load(): Promise { let config: Config = new Config("localhost", "5050"); return Promise.resolve(config); } } 

Si noti che alla fine si riscriverà il caricamento per leggere effettivamente una proprietà o alcuni di questi file per caricare la configurazione.

Ecco come appare config.ts:

 export class Config { constructor( private machine: string, private port: string ) { } private base_url: string = "http://" + this.machine + this.port + "/"; public loginURL: string = this.base_url + "login"; } 

Sto ottenendo un errore di compilazione

 public/app/app.module.ts(27,11): error TS2345: Argument of type '{ declarations: (typeof AppComponent ...' is not assignable to parameter of type 'NgModuleMetadataType'. Types of property 'bootstrap' are incompatible. Type '(typeof AppComponent | Provider)[]' is not assignable to type '(Type | any[])[]'. Type 'typeof AppComponent | Provider' is not assignable to type 'Type | any[]'. Type 'Provider' is not assignable to type 'Type | any[]'. Type 'Provider' is not assignable to type 'any[]'. Property '[Symbol.iterator]' is missing in type 'Provider'. 

Modifica 2

Passo al passaggio successivo. Aggiorna ConfigService per leggere un file JSON usando http.get. Ora ho un errore. Ecco i file aggiornati:

 export class ConfigService { private config: Config; constructor(private http: Http) { } load(): Promise { this.http.get("/blah/config.json") .map(res => res.json()) .subscribe((env_data) => { console.log(env_data); }); this.config = new Config("localhost", "5050"); return Promise.resolve(this.config); } getConfig(): Config { return this.config; } } 

Ecco la sezione dei provider nella class NgModule

  providers: [AuthService, Title, appRoutingProviders, ConfigService, { provide: APP_INITIALIZER, useFactory: (config: ConfigService) => () => config.load(), deps: [ConfigService, Http], multi: true }], 

Notare che in RC6 non sono in grado di importare HTTP_PROVIDERS poiché ho ricevuto l’errore che questi non sono più definiti nel modulo http. Questo è il motivo per cui ho provato Http.

In fase di esecuzione, ottengo l’errore seguente

 (index):27 Error: Error: Can't resolve all parameters for ConfigService: (?).(…)(anonymous function) @ (index):27 ZoneDelegate.invoke @ zone.js:332 Zone.run @ zone.js:225(anonymous function) @ zone.js:591 ZoneDelegate.invokeTask @ zone.js:365 Zone.runTask @ zone.js:265 drainMicroTaskQueue @ zone.js:497 ZoneTask.invoke @ zone.js:437 

Forniscilo nel tuo modulo root

 {provide: APP_INITIALIZER, useValue: () => promise, multi: true}]} 

where () => promise è una chiamata che restituisce una Promessa che si risolve nel valore desiderato.

Vedi anche Come passare parametri resi dal backend al metodo bootstrap angular2

È ansible passare un servizio come dipendenza in cui è ansible memorizzare il risultato.

aggiornare

 export function loadConfig(config: ConfigService) => () => config.load() @NgModule({ declarations: [AppComponent], imports: [BrowserModule, routes, FormsModule, HttpModule], providers: [AuthService, Title, appRoutingProviders, ConfigService, { provide: APP_INITIALIZER, useFactory: loadConfig, deps: [ConfigService], multi: true } ], bootstrap: [AppComponent] }) export class AppModule { } 

aggiornamento 2

Esempio di Plunker