使用远程数据引导 Angular 2 应用程序

Bootstrapping an Angular 2 application with remote data

我正在尝试设置一个应用程序,让我的 Angular 客户端应用程序与 API 服务器进行通信。在这个 API 服务器中,我声明了各种环境变量以匹配它的不同环境(当前为 developmentproduction)。

Angular 客户端应该通过 HTTP 获取在 API 端点 http://myserver.com/api/client-config 上提供的这些环境变量的一部分。我知道这应该在 bootstrapped 应用程序之前发生,但我不明白应该在哪里或如何包含 HTTP 调用。

app.module.ts

...
import firebaseConfig from './config/firebase.config'; 

@NgModule({
    declarations: [
        AppComponent,
        VrtVideoPlayer,
        VrtAppsComponent,
        SubtitlesComponent,
        RangeSliderComponent,
        listPipe
    ],
    imports: [
        BrowserModule, 
        FormsModule,
        NgbModule,
        VgCore, 
        VgControlsModule, 
        VgOverlayPlayModule, 
        VgBufferingModule,
        HttpModule,
        AngularFireModule.initializeApp( firebaseConfig() ),
        RouterModule.forRoot([
            { path: 'subtitles', component: SubtitlesComponent },
            { path: '', component: SubtitlesComponent },
        ]),
    ],
    providers: [ExtBrowserXhr],
    bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import {Component} from '@angular/core';

import '../node_modules/bootstrap/scss/bootstrap.scss';
import './common/styles/styles.scss';

@Component({
    selector: 'my-app',
    templateUrl: 'app.component.html',
})
export class AppComponent {
}

bootstrap.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

更具体地说 以下导入:

import firebaseConfig from './config/firebase.config'

依赖于在API服务器环境中声明的环境变量。我可以在这里简单地发出 HTTP GET 请求吗?如果我的应用程序需要由 http://myserver.com/api/client-config 在别处提供的配置对象,这将不是一个理想的解决方案。是否可以 bootstrap 我的应用程序使用此数据,如果可以 - 关于此的最佳做法是什么?

只是回答我自己的问题;在这种特殊情况下,我决定利用环境变量的客户端实现是解决我的问题的正确方法,而不是尝试导入在服务器环境中定义的变量。

我 运行 我的客户使用 Webpack。可以在此处找到实现客户端环境变量的可能方法的完美示例:

angular2-webpack-starter/wiki