angular 4 使用 webpack 如何为多个测试环境设置应用程序答案

【问题标题】：angular 4 using webpack how to set up app for multiple test environmentsangular 4 使用 webpack 如何为多个测试环境设置应用程序
【发布时间】：2017-09-10 15:37:11
【问题描述】：

我已经使用 Webpack 创建了 Angular 4 应用程序。我必须为 4 个不同的区域（3 个测试区域和 1 个生产区域）设置应用程序。对于每个不同的环境，服务端点 URL 是不同的。构建和部署过程应该是自动化的. 请注意，我没有使用 Angular CLI。

【问题讨论】：

太糟糕了，因为 CLI 对环境有原生支持。也许你可以用它作为灵感。或者只是使用它。
是的，CLI 支持环境，但是这个项目已经使用 webpack 设置好了。

标签： angular webpack development-environment

【解决方案1】：

仔细按照这些步骤操作，一切顺利：)

在环境文件夹中创建 4 个文件：（默认情况下可能有 2 个）例子： environment.ts、environment.prod.ts、environment.test1.ts、environment.test2.ts
对每个稍作改动的文件使用这个通用代码：

导出常量环境 = { production: true, //production 对于 environment.prod.ts 文件为 true //对于其他测试产生为假 apiUrl: '' //每个环境的base_url };
维护一个常量文件，您将在其中写入所有基本 url。 constant.ts的代码示例：

从'../environments/environment'导入{环境}；让 url = environment.apiUrl; 导出 const AppConstant = Object.freeze({ BASE_API_URL：网址， }
将此常量导入到您的服务或组件类中，无论您调用后端。
在 angular-cli.json 中：

"environmentSource": "environments/environment.ts", “环境”：{ “开发”：“环境/环境.ts”， “产品”：“环境/environment.prod.ts”， "test1": "环境/environment.test1.ts", “test2”：“环境/environment.test2.ts” }

ng build --env=prod
ng build --env=dev / ng build
 ng build --env=test1
 ng build --env=test2

希望它能解决您的问题。它对我有用。

【讨论】：