如何使用配置为 ng e2e 指定端口和主机答案

【问题标题】：How to specify the port and host for ng e2e using configuration如何使用配置为 ng e2e 指定端口和主机
【发布时间】：2017-04-23 12:59:47
【问题描述】：

如何使用配置文件为ng e2e 命令设置端口和主机？

我知道可以在命令行中使用以下语句

ng e2e --port <port number> --host <host>

这很好用，但是在配置文件中设置端口和地址会更方便。我查看了.angular-cli.json 内部，发现有一个名为protractor.config.js 的文件，我无法弄清楚要在该文件中使用哪些设置，有一个baseUrl 设置，但更改它不会产生任何影响与ng e2e 命令使用的端口不同。它似乎在使用随机端口。

除了baseUrl，我也尝试过设置port和seleniumPort，但它们没有区别。

输入ng e2e 命令后，控制台中会出现以下输出

** NG Live Development Server is running on http://localhost:49155 **

在protractor.config.js 中，我将baseUrl 设置为http://localhost:50000。我观察到正在执行的测试，我可以看到浏览器正在使用地址 http://localhost:49155，这不是我想要的地址。

ng --version 返回以下内容

@angular/cli: 1.0.0
节点：7.7.1
操作系统：win32 x64
@angular/common: 4.0.3
@angular/编译器：4.0.3
@角/核心：4.0.3
@angular/forms：4.0.3
@angular/http：4.0.3
@angular/平台浏览器：4.0.3
@angular/platform-browser-dynamic: 4.0.3
@angular/路由器：4.0.3
@angular/cli：1.0.0
@angular/compiler-cli: 4.0.3

【问题讨论】：

你是什么意思“被ng e2e命令使用”？您是在谈论 selenium 正在运行的端口，还是它将寻找正在运行的应用程序的端口？后者您绝对可以使用baseUrl 进行更改。你能显示你得到的输出吗？
@jonrsharpe 我说的是应用程序运行的端口。输出的第一行是** NG Live Development Server is running on http://localhost:49155 **，但我已将baseUrl 设置为http://localhost:50000
那是 ng serve 运行的端口，当然，不一定是 ng e2e 正在寻找的端口？
我尝试输入不存在的主机和端口作为 baseUrl 并且测试通过了，所以似乎 baseUrl 没有做任何事情，因为我可以使用命令行参数和输入相同的不存在的主机和端口会发生错误

标签： angular protractor angular-cli

【解决方案1】：

通过修改项目webapp-e2e来设置angular.json中的主机和端口，例如：

"e2e": {
  "builder": "@angular-devkit/build-angular:protractor",
  "options": {
    "protractorConfig": "./protractor.conf.js",
    "devServerTarget": "webapp:serve",
    "port": 4201
  }

一旦 webapp:serve-command 被 angular-cli 调用，这将覆盖正在使用的端口。忘记 protractor.conf.js 文件 - 直到过程后期才使用它。

因此，您可以独立或并行运行 ng serve --watch（用于服务和单元测试）和 ng e2e（用于 e2e 测试）。

br，延斯

【讨论】：

当我添加port 属性时，我在运行ng e2e 时收到以下错误消息：Data path "['e2e']" should NOT have additional properties(port).
与@NathanFriend 相同
这里也一样。

【解决方案2】：

在运行ng e2e 时，我没有看到开发服务器运行的端口的配置

你最好的选择可能是一个 NPM 脚本：https://docs.npmjs.com/misc/scripts

在scripts下添加"e2e":"ng e2e --port <port number> --host <host>"到package.json
通过运行npm run e2e 来使用脚本，这将在package.json 中运行脚本e2e，在这种情况下是您的ng e2e --port <port number> --host <host>

它不是一个配置文件，但它就像一个配置文件。

【讨论】：

【解决方案3】：

baseUrl 属性在 protractor.config.js 中不起作用，但您可以在同一 config.js 中以编程方式在 onPrepare 方法中设置该属性

{
    onPrepare() {
        browser.baseUrl = 'http://localhost:4200/';
    },
}

我一直在 Angular 1.x 中使用这个解决方案，仍然适用于 Angular 2/4

【讨论】：

我也注意到了这一点；当使用 Angular CLI ng e2e 命令时，baseUrl 由于某种原因被覆盖。
我无法在任何地方找到 protractor.config.js 文件，因为它显然在最新版本中被重命名为 protractor.conf.js。

【解决方案4】：

我发现当我们调用命令ng e2e时，开发服务器会默认运行在http://localhost:49152/上

为了能够使用配置为 ng e2e 指定端口和主机，我们将在 protractor.conf.js 文件中使用属性 baseUrl。我们需要：

单独提供应用程序
然后我们在调用ng e2e时将serve设置为false，所以Protratcor将直接与baseUrl通信

例如：

我们首先需要在 protractor.conf.js 上输入：
baseUrl:'http://localhost:8088'
运行命令：
ng serve --port 8088
在另一个 shell 上运行测试：
ng e2e --serve false

还有另一个我们不使用baseUrl 的策略。我们只需要：
- 在 shell 1 中运行：ng serve --port 4200
- 在 shell 2 中运行：ng e2e --serve false --base-href=http://localhost:4200

【讨论】：