Angular2 Anchronronous bootstrapping с внешним конфигурационным файлом json
Я обновил до angular2 RC6 и хочу загрузить внешний конфигурационный файл JSON перед загрузкой моего AppModule. Я работал над RC5, но теперь у меня проблемы с поиском эквивалентного способа ввода этих данных.
/** 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)); }); Это работало отлично, но я старался перейти на работу с RC6.
Я экспериментирую с следующим подходом, но изо всех сил пытаюсь изменить предопределенный AppModule с загруженными данными:
- Угловая 2 Труба заказа
- Обработка 401s по всему миру с помощью углового
- Предупреждать пользователя о несохраненных изменениях перед выходом на страницу
- Angular2: приложение аварийно завершает работу / становится невосприимчивым после обнаружения исключения / ошибки
- Просмотр не обновляется при изменении в Angular2
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);
- Как использовать * ngIf else в Angular?
- Как глобально установить параметр preserveWhitespaces в Angular на false?
- Передача данных в дочерние компоненты маршрутизатора-выхода (угловые 2)
- Angular2, * ngIf и локальные переменные шаблона
- Связывает Angularjs с новым элементом html динамически
- Angular 2 - просмотр не обновляется после изменения модели
- Как я могу ограничить повторение ngFor некоторым количеством элементов в Angular?
- Что делает атрибут «ng-reflect- *» в Angular2 / 4?
У меня такая же проблема. Похоже, вы натолкнулись на мой Гист 🙂
Что касается обновления RC 6, вы должны проверить источник HttpModule . Он показывает всех поставщиков, которые изначально были в удаленном 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);
Это не самое красивое (это действительно не так уж плохо), но я нашел то, о чем я даже не знал, из этого поста . Похоже, вы можете объявить модуль внутри функции.
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) });