Angular2 Khởi động không đồng bộ với tệp cấu hình json bên ngoài

Question

Tôi đã nâng cấp lên angular2 RC6 và muốn tải tệp cấu hình JSON bên ngoài trước khi khởi động ứng dụng AppModule của tôi. Tôi đã làm việc này trước RC5 nhưng bây giờ gặp khó khăn trong việc tìm kiếm một cách tương đương để tiêm dữ liệu này.

/** Create dummy XSRF Strategy for Http. */ 
const XRSF_MOCK = provide(XSRFStrategy, { provide: XSRFStrategy, useValue: new FakeXSRFStrategyService() }); 

/** Create new DI. */ 
var injector = ReflectiveInjector.resolveAndCreate([ConfigService, HTTP_PROVIDERS, XRSF_MOCK]); 

/** Get Http via DI. */ 
var http = injector.get(Http); 

/** Http load config file before bootstrapping app. */ 
http.get('./config.json').map(res => res.json()) 
    .subscribe(data => { 

     /** Load JSON response into ConfigService. */ 
     let jsonConfig: ConfigService = new ConfigService(); 
     jsonConfig.fromJson(data); 

     /** Bootstrap AppCOmponent. */ 
     bootstrap(AppComponent, [..., provide(ConfigService, { useValue: jsonConfig }) 
    ]) 
    .catch(err => console.error(err)); 
}); 

Điều này làm việc tốt nhưng khó khăn để thay đổi để làm việc với RC6.

Tôi đang thực hiện thí điểm phương pháp sau đây nhưng đấu tranh để sửa đổi AppModule được xác định trước của tôi với dữ liệu được nạp:

const platform = platformBrowserDynamic(); 

if (XMLHttpRequest) { // Mozilla, Safari, ... 
    request = new XMLHttpRequest(); 
} else if (ActiveXObject) { // IE 
    try { 
    request = new ActiveXObject('Msxml2.XMLHTTP'); 
    } catch (e) { 
    try { 
     request = new ActiveXObject('Microsoft.XMLHTTP'); 
    } catch (e) { 
     console.log(e); 
    } 
    } 
} 
request.onreadystatechange = function() { 
    if (this.readyState === 4 && this.status === 200) { 
    var json = JSON.parse(this.responseText); 
    let jsonConfig: ConfigService = new ConfigService(); 
    jsonConfig.fromJson(json); 
    /**** How do I pass jsConfig object into my AppModule here?? ****/ 
    platform.bootstrapModule(AppModule); 
    } 
}; 

// Open, send. 
request.open('GET', './config.json', true); 
request.send(null); 

Answer 1

tôi đã cùng một vấn đề. Có vẻ như bạn đã xem qua my Gist :-)

Theo như bản cập nhật RC 6, bạn nên kiểm tra HttpModule source. Nó cho thấy tất cả các nhà cung cấp ban đầu trong HTTP_PROVIDERS hiện đã bị xóa. Tôi chỉ kiểm tra rằng ra ngoài và đã đưa ra những điều sau

function getHttp(): Http { 
    let providers = [ 
    { 
     provide: Http, useFactory: (backend: XHRBackend, options: RequestOptions) => { 
     return new Http(backend, options); 
     }, 
     deps: [XHRBackend, RequestOptions] 
    }, 
    BrowserXhr, 
    { provide: RequestOptions, useClass: BaseRequestOptions }, 
    { provide: ResponseOptions, useClass: BaseResponseOptions }, 
    XHRBackend, 
    { provide: XSRFStrategy, useValue: new NoopCookieXSRFStrategy() }, 
    ]; 
    return ReflectiveInjector.resolveAndCreate(providers).get(Http); 
} 

Theo như các

/**** How do I pass jsConfig object into my AppModule here?? ****/ 
platform.bootstrapModule(AppModule); 

Nó không phải là đẹp nhất (nó thực sự không phải là xấu), nhưng tôi tìm thấy một cái gì đó tôi thậm chí còn không biết là có thể, từ this post. Có vẻ như bạn có thể khai báo mô-đun bên trong chức năng.

function getAppModule(conf) { 
    @NgModule({ 
    declarations: [ AppComponent ], 
    imports:  [ BrowserModule ], 
    bootstrap: [ AppComponent ], 
    providers: [ 
     { provide: Configuration, useValue: conf } 
    ] 
    }) 
    class AppModule { 
    } 
    return AppModule; 
} 

Dưới đây là những gì tôi chỉ được sử dụng để kiểm tra ngay bây giờ

import { ReflectiveInjector, Injectable, OpaqueToken, Injector } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/toPromise'; 
import { 
    Http, CookieXSRFStrategy, XSRFStrategy, RequestOptions, BaseRequestOptions, 
    ResponseOptions, BaseResponseOptions, XHRBackend, BrowserXhr, Response 
} from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { Configuration } from './configuration'; 

class NoopCookieXSRFStrategy extends CookieXSRFStrategy { 
    configureRequest(request) { 
    // noop 
    } 
} 

function getHttp(): Http { 
    let providers = [ 
    { 
     provide: Http, useFactory: (backend: XHRBackend, options: RequestOptions) => { 
     return new Http(backend, options); 
     }, 
     deps: [XHRBackend, RequestOptions] 
    }, 
    BrowserXhr, 
    { provide: RequestOptions, useClass: BaseRequestOptions }, 
    { provide: ResponseOptions, useClass: BaseResponseOptions }, 
    XHRBackend, 
    { provide: XSRFStrategy, useValue: new NoopCookieXSRFStrategy() }, 
    ]; 
    return ReflectiveInjector.resolveAndCreate(providers).get(Http); 
} 

function getAppModule(conf) { 
    @NgModule({ 
    declarations: [ AppComponent ], 
    imports:  [ BrowserModule ], 
    bootstrap: [ AppComponent ], 
    providers: [ 
     { provide: Configuration, useValue: conf } 
    ] 
    }) 
    class AppModule { 
    } 
    return AppModule; 
} 

getHttp().get('/app/config.json').toPromise() 
    .then((res: Response) => { 
    let conf = res.json(); 
    platformBrowserDynamic().bootstrapModule(getAppModule(conf)); 
    }) 
    .catch(error => { console.error(error) });