Question

在Angular 2框架呈现任何组件或服务之前，我需要来自我的json文件的一些配置数据。我没有找到任何好的工作解决方案来实现这一点。

我使用Angular 2 RC6在Angular 1的混合模式下工作，所以我使用升级适配器来执行bootstraping。

您有什么想法可以实现我的需求吗？

Answer 1

在“main.ts”文件中，我使用jQuery“$ .getJSON”函数加载配置文件，在回调时我调用bootstrap函数：

declare var $: any;
declare var configFile: string;

import './polyfills.ts';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from './environments/environment';
import { AppModule } from './app';

if (environment.production) {
    enableProdMode();
    this.configFile = 'assets/config.prod.json';
} else {
    this.configFile = 'assets/config.json';
}

$.getJSON(this.configFile, (data) => {
    environment.config = data;

    platformBrowserDynamic().bootstrapModule(AppModule);
});

这样，您可以确保在配置数据完全加载后执行自举。

Answer 2

查看此博客：https://www.cidean.com/blog/2019/initialize-data-before-angular-app-starts/

在应用启动和获取数据之前，它使用APP_INITIALIZER钩住AppConfigService。另请参见博客以了解AppConfigService的实现。

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppConfigService } from './services/app-config.service';

export function appInit(appConfigService: AppConfigService) {
  return () => appConfigService.load();
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
  ],
  providers: [AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInit,
      multi: true,
      deps: [AppConfigService]
    }],
  bootstrap: [AppComponent]
})
export class AppModule { }

如何在Angular 2应用程序启动之前读取配置文件？

2 个答案: