बाहरी जेसन कॉन्फ़िगरेशन फ़ाइल

Question

के साथ कोणीय 2 Ansychronous बूटस्ट्रैपिंग मैंने angular2 आरसी 6 में अपग्रेड किया है और मेरे AppModule बूटस्ट्रैप करने से पहले बाहरी JSON कॉन्फ़िगरेशन फ़ाइल लोड करना चाहता हूं। मैंने आरसी 5 से पहले यह काम किया था लेकिन अब मुझे इस डेटा को इंजेक्ट करने के बराबर तरीके खोजने में परेशानी हो रही है।

/** 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)); 
}); 

यह ठीक काम करता है लेकिन आरसी 6 के साथ काम करने के लिए संघर्ष करने के लिए संघर्ष कर रहा है।

मैं निम्नलिखित दृष्टिकोण प्रयोग कर रहा हूँ लेकिन लोड किया गया डेटा के साथ अपने पूर्वनिर्धारित AppModule संशोधित करने के लिए संघर्ष कर रही:

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

मैं एक ही समस्या थी। ऐसा लगता है कि आप my Gist :-)

जहां तक ​​आरसी 6 अपडेट है, आपको HttpModule source देखें। यह उन सभी प्रदाताओं को दिखाता है जो मूल रूप से अब HTTP_PROVIDERS हटा दिए गए थे। मैं सिर्फ इतना है कि बाहर की जाँच की और निम्नलिखित

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

साथ जहाँ तक

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

यह सुंदर नहीं है के रूप में आया था (यह वास्तव में है कि बुरा नहीं है), लेकिन मैं कुछ मैं भी नहीं था पाया this post से पता था, संभव था। ऐसा लगता है कि आप को फ़ंक्शन के अंदर मॉड्यूल घोषित कर सकते हैं।

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

नीचे क्या मैं सिर्फ अभी

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