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

Question

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

Answer 1

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

environment.ts:此文件导出常量 JSON 对象环境。如果您在 Angular 项目中引用环境对象属性，则在开发模式(即 ngserve 或 ngbuild)期间，所有值都应从此文件中读取。

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`);
  }
}

希望对你有帮助。