时间戳

首页 > 解决方案 > ngbuild根据环境改变占位符

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

问题描述

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

标签： javascriptangulartypescriptangular5ng-build

解决方案

在您的项目 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`);
  }
}

我希望我对你有所帮助。

推荐阅读