angular - Angular 环境特定部署

问题描述

我是 Angular 开发的新手。我开发了一个 Angular Web 应用程序，它通过 REST 与后端 Java 应用程序对话，然后又与数据库对话以执行一些 CRUD 操作。

Angular APP <-> 后端 Java <-> DB

在 Angular 应用程序中，我在一个打字稿文件中配置了多个 URL，我们称之为app.constants.ts。从我的 Angular 服务中，我从app.constants.ts读取 URL，并使用它对我的后端 Java 应用程序进行 REST 调用。我使用命令ng build --prod构建/编译 Angular 应用程序，该命令在dist下生成一个文件夹，其中包含 index.html、一些图像、javascript 文件和一些文本文件。然后我将此文件夹复制到运行在不同服务器上的 Tomcat 下的 webapps/deploy 文件夹中，这将启动 Angular 应用程序，运行良好！

但我真正的问题是，

一直以来，我一直在从 typescript 文件中读取常量并使用它来构建应用程序。
而不是这个，我想要单独的配置文件，比如用于生产、登台、开发、测试等的配置文件。
我只想构建一次Angular 应用程序并使用该特定环境的配置文件部署它。
即使我使用多个打字稿文件进行配置，这也将用于编译角度代码。相反，我只希望代码与配置的占位符一起编译一次，并根据我们部署应用程序的方式使用正确配置文件中的配置。

这可能吗？任何信息/帮助将不胜感激。谢谢你。

按照@IsraGab 文件的建议，在使用 APP_INITIALIZER 使其工作后添加以下代码：app-config.service.ts

settings: Config;
load() {
    const jsonFile = './assets/config/config.json';
    return new Promise<void>((resolve, reject) => {
        this.http.get(jsonFile).toPromise().then((response : Config) => {
           this.settings = <Config>response;

           console.log('Config Loaded');
           console.log( this.settings);
           resolve();
           
        }).catch((response: any) => {
           reject(`Could not load the config file`+response);
        });
    });
}

文件：app.module.ts

providers: [{ provide: APP_INITIALIZER,useFactory: initializeApp, deps: [AppConfigService], multi: true}]

export function initializeApp(appConfigService: AppConfigService) {
  return (): Promise<any> => { 
    return appConfigService.load();
  }
}
@NgModule

文件：mydata.service.ts

protected configURL;
constructor(private apiService: AppConfigService ) { 
    this.configURL = this.apiService.url;
}

标签： angulartypescriptconfigurationproduction

你有两种方法可以做到这一点。首先，让我们将您的常量文件称为配置文件。

第一个选项是使用environment.*.ts文件，添加angular.json并在这些文件中声明您的常量。如果您选择该选项，则必须运行与环境一样多的构建（一个构建用于测试，一个构建用于生产......）。
第二个选项是使用APP_INITIALIZER来加载（http 请求）配置文件 - 该配置文件将具有相同的名称，但在每个环境中会有所不同（无需在该选项中进行不同的构建）。

Here你可以找到一个教程如何使用APP_INITIALIZER在运行时加载配置（第二个选项）

angular - Angular 环境特定部署

问题描述

解决方案

推荐阅读