Angular 使用文件配置生产应用程序

我必须构建一个概念验证的angular应用程序，该应用程序将对应用程序（软件）进行API调用。 我的问题是，我正在测试本地应用程序上的调用，客户应用程序可能有不同的设置：不同的入口点、不同的端口等等

我希望能够定义这些参数并从生产服务器上的文件中读取它们。

---

我读过关于使用环境文件的内容，但我必须在构建应用程序之前进行设置。我希望以后能够成功。

我终于发现以下是要遵循的步骤：

1。创建服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AppConfigService {
  private appConfig;

  constructor(private http: HttpClient) { }

  loadAppConfig() {
    return this.http.get('/assets/data/appConfig.json')
      .toPromise()
      .then(data => {
        this.appConfig = data;
      });
  }

  getConfig() {
    return this.appConfig;
  }
}

**二,。在app.module中导入此服务+创建初始值设定项函数**

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

const appInitializerFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  };
};

@NgModule({
  ...
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFn,
      multi: true,
      deps: [AppConfigService]
    }
  ],
  ...
})
export class AppModule { }

在我的应用程序中。组件：

constructor(private appConfig: AppConfigService) {
}
ngOnInit(): void {
  this.myConfig = this.appConfig.getConfig();
}

---

现在，我可以在模板中或应用程序中的任何位置显示配置数据。构建时，json文件也会导出，我们可以访问它

我终于发现了以下步骤：

1。创建服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AppConfigService {
  private appConfig;

  constructor(private http: HttpClient) { }

  loadAppConfig() {
    return this.http.get('/assets/data/appConfig.json')
      .toPromise()
      .then(data => {
        this.appConfig = data;
      });
  }

  getConfig() {
    return this.appConfig;
  }
}

**二,。在app.module中导入此服务+创建初始值设定项函数**

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

const appInitializerFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  };
};

@NgModule({
  ...
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFn,
      multi: true,
      deps: [AppConfigService]
    }
  ],
  ...
})
export class AppModule { }

在我的应用程序中。组件：

constructor(private appConfig: AppConfigService) {
}
ngOnInit(): void {
  this.myConfig = this.appConfig.getConfig();
}

现在，我可以在模板中或应用程序中的任何位置显示配置数据。构建时，json文件也会导出，我们可以访问它