javascript - ngbuild根据环境改变占位符

Question

我有一个 Angular 5 项目。为了部署要部署的包，我使用了 NG BUILD 命令。但是，我有一些占位符需要根据环境进行相应更改。例如，我有一个配置文件占位符。对于 PROD，我需要将值更改为http://blablabla.com，并将 TEST 环境更改为http://localhost。我确定如果使用 NG BUILD 我可以做到。

Answer 1

在您的项目 Angular 5 中，您有一个目录“环境”，如下图所示，其中包含 2 个文件：

environment.ts：此文件导出一个常量 JSON 对象环境。如果您在 Angular 项目中引用环境对象属性，则在开发模式期间，即 ng serve 或 ng build 应从此文件中读取所有值。

environment.prod.ts：此文件导出相同的 JSON 对象，并且应具有与 environment.ts 文件相同的属性。在这种情况下，当您使用 ng build --prod 为生产模式构建应用程序时， environment.ts 文件的所有值都将被 environment.prod.ts 文件覆盖。

将开发 HTTP Url 放在 environment.ts 文件中

export const environment = {
  production: false,
  baseUrl: 'https://fakerestapi.com/api'  
};

将生产 HTTP Url 放入 environment.prod.ts 文件中：

export const environment = {
  production: true,
  baseUrl: 'https://production.com/api'
};

在 Angular 应用程序的其余部分，请参阅 environment.baseUrl

import { environment } from '../environments/environment';


@Injectable()
export class ClientService {  

  baseUrl = environment.baseUrl;

  constructor(private httpClient: HttpClient) { }

  getClients(): Observable<Client[]> {
    return this.httpClient.get<Client[]>(`${this.baseUrl}/clients`);
  }
}

我希望我对你有所帮助。

Answer 2

把你的变量放在你的 environment.ts 文件中，所以如果你有：

开发 环境.dev.ts

等等..对于其他环境，无论您需要变量导入环境并通过 environment.yourVariable 使用。

然后根据您的构建命令，例如；ng build --prod它将使用 environment.prod.ts 文件和它的配置。

环境文件例如：

export const environment = {
  production: false,
  animal: ''
};