Angular 环境特定部署

Question

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

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

在angular应用程序中，我在打字稿文件中配置了多个URL，我们称之为app.constants.ts。从我的 Angular 服务中，我从 app.constants.ts 中读取了 URL 并用它来制作REST 调用我的后端 Java 应用程序。我 build/compile angular 应用程序使用命令 ng build --prod，它会在 dist 下生成一个文件夹，其中包含 index.html、少量图像、java脚本文件和少量文本文件。然后我将此文件夹复制到另一台服务器上 Tomcat 运行下的 webapps/deploy 文件夹，这将启动 Angular 应用程序，运行良好！

但我真正的问题是，

我一直在从打字稿文件中读取常量并使用它来构建应用程序。
而不是这个，我想要单独的配置文件，比如 production、staging、dev、testing 等等。
我只想构建 angular 应用程序一次并使用特定环境的配置文件部署它。
即使我使用多个 typescript 文件进行配置，这也会用于 angular 代码的编译。相反，我只希望代码使用配置占位符编译一次，并根据我们部署应用程序的方式使用来自正确配置文件的配置。

这可能吗？任何 information/help 将不胜感激。谢谢。

按照@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;
}

Answer 1

您可以像这样在 angular.json 文件上设置配置，

环境文件

/src/environments/
               └──environment.ts
               └──environment.prod.ts
               └──environment.stage.ts

angular.json

"configurations": {
  "production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
]},
  "staging": {
    "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.stage.ts"
    }
  }
}

在构建应用程序时，您可以指定构建配置

ng build --configuration=staging

"scripts": {
  "build-all": "ng build --configuration=staging && cp -r ./dist ./staging_build && ng build --configuration=production  && cp -r ./dist ./production_build"
}

Building and serving Angular apps

Answer 2

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

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

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

Answer 3

对于这种情况，您可以使用位于 Angular 项目的 'src -> environments' 文件夹内的环境文件。您也可以为不同的服务器创建更多环境文件。

在该环境文件中，您可以为不同的服务器配置不同的配置，例如 URLs、API 端点等。

假设您有两台服务器，一台是本地服务器，另一台是生产服务器。所以你可以有 2 个环境文件，它们是：

environment.ts
environment.prod.ts

您的环境文件可以包含以下代码：

export const environment = {
   production: false,
   baseURL: 'https://someUrl.com',
};

在这种情况下，有一个键名为 production，这是错误的。这样你就可以使用运行本地项目，对于 environment.prod.ts 你可以使用 true 作为生产密钥，你也可以使用不同的 URL 作为生产模式。

并且如果您检查 angular.json 文件中的配置对象，您会认为 environment.ts 文件将被 environment.prod.ts

替换

并且通过使用构建命令，您可以为生产服务器创建构建，它将根据您在 environment.prod.ts 文件中的配置创建另一个基础 URL。

ng build --prod

此环境文件的全部目的是您可以使用不同的环境文件轻松地将具有不同配置的本地、开发、阶段和生产服务器分开。

您还可以访问文档进行深入解释： https://angular.io/guide/build

Angular 环境特定部署

Angular Environment Specific Deployment

configuration

production

typescript

angular