使用远程数据引导 Angular 2 应用程序
Bootstrapping an Angular 2 application with remote data
我正在尝试设置一个应用程序,让我的 Angular 客户端应用程序与 API 服务器进行通信。在这个 API 服务器中,我声明了各种环境变量以匹配它的不同环境(当前为 development 和 production)。
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。可以在此处找到实现客户端环境变量的可能方法的完美示例:
我正在尝试设置一个应用程序,让我的 Angular 客户端应用程序与 API 服务器进行通信。在这个 API 服务器中,我声明了各种环境变量以匹配它的不同环境(当前为 development 和 production)。
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。可以在此处找到实现客户端环境变量的可能方法的完美示例: