So können Sie eine Angular 2-Anwendung asynchron starten

Question

Es gibt eine excellent article, wie Sie eine angular1-Anwendung asynchron starten. Dadurch können wir vor dem Bootstrapping einen json vom Server holen.

Der Hauptcode ist hier:

(function() { 
    var myApplication = angular.module("myApplication", []); 

    fetchData().then(bootstrapApplication); 

    function fetchData() { 
     var initInjector = angular.injector(["ng"]); 
     var $http = initInjector.get("$http"); 

     return $http.get("/path/to/data.json").then(function(response) { 
      myApplication.constant("config", response.data); 
     }, function(errorResponse) { 
      // Handle error case 
     }); 
    } 

    function bootstrapApplication() { 
     angular.element(document).ready(function() { 
      angular.bootstrap(document, ["myApplication"]); 
     }); 
    } 
}()); 

Wie erreiche ich das gleiche mit kantigem 2?

Answer 1

In der Tat müssen Sie explizit einen Injektor außerhalb der Anwendung selbst erstellen, um eine Instanz von Http zur Ausführung der Anfrage zu erhalten. Dann kann die geladene Konfiguration in den Providern hinzugefügt werden, wenn die Anwendung erweitert wird. Hier

ist ein Beispiel:

import {Component, Inject} from 'angular2/core'; 

@Component({ 
    selector: 'app', 
    template: ` 
    <div> 
     Test 
    </div> 
    ` 
}) 
export class AppComponent { 
    constructor(@Inject('config') private config) { 
    console.log(config); 
    } 
} 

Sehen Sie diese plunkr: https://plnkr.co/edit/kUG4Ee9dHx6TiJSa2WXK?p=preview

import {bootstrap} from 'angular2/platform/browser'; 
import {provide, Injector} from 'angular2/core'; 
import {HTTP_PROVIDERS, Http} from 'angular2/http'; 
import {AppComponent} from './app.component'; 
import 'rxjs/Rx'; 

var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]); 
var http = injector.get(Http); 

http.get('data.json').map(res => res.json()) 
    .subscribe(data => { 
    bootstrap(AppComponent, [ 
     HTTP_PROVIDERS 
     provide('config', { useValue: data }) 
    ]); 
    }); 

Dann haben Sie Zugriff auf die Konfiguration von Dependency Injection haben kann.

Answer 2

Ich habe versucht, ein ähnliches Problem zu lösen, und ich brauchte nicht nur die Anwendung asynchron zu starten, sondern auch einen asynchron initialisierten Dienst in meiner Anwendung zu verwenden. Dies ist die Lösung, vielleicht wird es für jemanden nützlich sein:

let injector = ReflectiveInjector.resolveAndCreate([Service1, 
{ 
    provide: Service2, 
    useFactory: (s1: Service1) => new Service1(s2), 
    deps: [Service1] 
}]); 

let s1: Service1 = injector.get(Service1); 
let s2: Service2 = injector.get(Service2); 

s2.initialize().then(() => { 
bootstrap(Application, [ 
    ...dependencies, 
    { 
     provide: Service2, 
     useValue: s2  // this ensures that the existing instance is used 
    } 
    // Service2 - this would create a new instance and the init would be lost 
    ]); 
}); 

Answer 3

Die Thierry Templier Methode funktioniert auch mit jQuery. Hier ist meine Lösung mit eckigen 2.3.1 (Datei main.ts):

import './polyfills.ts'; 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 
import { environment } from './environments/environment'; 
import { AppModule } from './app/app.module'; 
declare var $: any; 

if (environment.production) { 
    enableProdMode(); 
} 

$.ajax({ 
    'url': './assets/config.json', 
    'type': 'GET', 
    'success': function(data) { 
     platformBrowserDynamic(
     [ 
      { 
      provide: 'appConfig', 
      useValue: data 
      } 
     ] 
    ).bootstrapModule(AppModule); 
    } 
});