Angular9-在服务器上部署项目后，保持Rest api url可配置

如何解决Angular9-在服务器上部署项目后，保持Rest api url可配置

我有一个angular9项目，我需要将其部署到服务器上，它具有剩余的api url，当前我将它们存储在constant.ts文件中，但是在ng build --prod之后，所有文件都将转换为不同的格式

export const address = 'http://10.164.64.93:5200/api/';

我想知道即使将剩余api路径部署到服务器后，仍然可以对其进行配置的最佳方法是什么？我不想再次构建解决方案，但是我应该能够更改我的剩余URL路径或应用程序中的任何图像URL用户。

当前，如果应用程序或rest api中使用的图像有任何路径更改，我都会每次构建项目。我想避免这种情况，需要一些配置文件来设置此路径。任何输入都会有帮助。

解决方法

Angular CLI提供了一种环境功能，该功能允许运行针对特定环境的构建。当为生产模式构建应用程序时，环境/environment.ts文件将替换为环境/environment.prod.ts文件。因此，如果您在代码中引用environment.ts文件中的设置，则无需放置任何if条件或硬代码生成URL。

// environment.ts
  export const environment = {
    production: false;
    address : 'http://10.164.64.93:5200/api/';// local url
};
 ----------------------------
 // environment.prod.ts
export const environment = {
  production: true,address : 'http://10.164.64.93:5200/api/';// prod url here
};

并在这样的组件中使用它

import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';import { Component } 
@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'multiple-env-demo';
  environmentUrl = 'Debug api';
  constructor() {
    this.environmentUrl = environment.address;
  }
}

注意：构建完成后，我们可以找到main.bundle脚本文件，您将找到并更改环境变量。 在main.bundle.js文件中：

var environment = {
 address : 'http://10.164.64.93:5200/api/',};

,

似乎您正在寻找RunTime的配置，其中Angular CLI (build)支持构建时间配置。

这是"Build Once and Deploy Anywhere"范式的一部分，Angular不提供现成的支持。但是，使用简单的技巧很容易实现。

以下是实现此目标的步骤：

1. 使用资产文件夹，该文件夹在构建并在其中创建配置文件夹后不会更改。

 assets
    / config
         / env.json
         / config.dit.json
         / config.prod.json

env.json

{
  "env": "dit"
}

config.local.json

{
  "apiUrl": "http://10.164.64.93:5200/api/"
}

1. 这样，您可以随时更改值。 例如：如果要基于不同的env运行应用程序，请更改env.json中的值。 或者，如果您想即时更改API，请在config.XXX.json中进行相应的更改。

2. 创建服务以使用上述值。

await this._http.get('./assets/config/env.json').toPromise().then(res => {
   env = res.env;
});