Question

我正在尝试设置我的Angular客户端应用与API服务器通信的应用程序。在此API服务器中，我声明了各种环境变量以匹配它的不同环境（当前开发和生产）。

Angular客户端应该HTTP获取在API端点http://myserver.com/api/client-config上提供的这些env变量的一部分。我知道这应该在应用程序引导之前发生，但我不知道应该在何处或如何包含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);

更具体地说 以下导入：

从＆＃39; ./ config / firebase.config＆＃39;
导入firebaseConfig

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

Answer 1

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

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

angular2-webpack-starter/wiki

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

1 个答案: