Angular 2アプリケーションを非同期にブートストラップする方法

Question

angular1アプリケーションを非同期にブートストラップする方法については、excellent articleがあります。これにより、ブートストラッピングする前にサーバからjsonを取得することができます。

メインコードはここにある：

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

私は、角2と同じことを達成するにはどうすればよいですか？

Answer 1

実際、要求を実行するためにHttpのインスタンスを取得するには、アプリケーション自体の外部にインジェクタを明示的に作成する必要があります。その後、アプリケーションを追加取得するときに、ロードされた設定をプロバイダに追加することができます。ここで

はサンプルです：

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

その後、依存性注入により設定にアクセスすることができます。https://plnkr.co/edit/kUG4Ee9dHx6TiJSa2WXK?p=preview：

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

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

このplunkrを参照してください。

Answer 2

私は同様の問題を解決しようとしていました。アプリケーションを非同期にブートストラップするだけでなく、アプリケーションで非同期で初期化されたサービスを使用する必要がありました。 これは解決策である、多分それは誰かのために有用であろう：

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

ティエリーTEMPLIER方法はまた、jQueryを使って動作します。 角度2.3.1（ファイル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); 
    } 
});