一起运行 ng test 和 ng serve答案

【问题标题】：Running ng test and ng serve together一起运行 ng test 和 ng serve
【发布时间】：2018-01-10 01:59:54
【问题描述】：

我是 Angular 5 的相对新手，正在尝试为我的团队设置开发设置以构建 Angular 5 应用程序。

我希望团队能够在每次进行更改时运行 linting 和单元测试，然后提供更改，以便开发人员可以立即看到她所做的更改。

我尝试了以下方法：

运行 ng lint 将 lint 项目
运行 ng test 会启动 Karma 测试运行程序，对代码所做的任何更改都会立即启动测试，并在刚刚引入的任何更改导致测试失败时向开发人员提供反馈。
运行 ng serve 将在内部启动 webpack-dev-server 并构建项目并为其提供服务，以便开发人员可以立即看到添加/修改的功能，以便在浏览器上尝试和验证。

我想要实现的是让开发人员在继续开发项目时，在上述所有三个方面（检查错误、损坏的测试和提供功能）获得持续的反馈。

有没有办法让所有这三者一起运行，并且在每次对代码进行更改时对开发人员可见？

【问题讨论】：

您可以在 3 个不同的终端中同时运行所有 3 个。我就是这么做的。
这是一个可靠的答案：stackoverflow.com/questions/30950032/…

标签： angular karma-runner angular-cli webpack-dev-server

【解决方案1】：

您可以使用& 运算符同时运行所有三个命令（不要与&& 混淆）。操作员将生成该进程，但与下一个进程共享控制台中的输出。

例如

ng test & ng server & ng lint

这三个将同时运行。您可以将上述内容放入 bash 脚本中以使其更容易。

我确实尝试将此作为可运行脚本添加到 package.json，但没有成功。

【讨论】：

这很正常，因为ng serve 将启动服务器并等待它终止，而ng test 和ng lint 只是执行一些代码并根据结果返回一个结果（布尔值）。

【解决方案2】：

问题是你不能一直运行ng lint 和ng test，而ng serve 将运行并保持实时重载唤醒直到你终止它。

这就是为什么人们通常会将单元测试集成到一个持续集成周期中，通常使用 Jenkins 作业/管道，并使用 WebHook 或类似的东西链接到他们的存储库。

具体来说，就像在每个commit / merge request / 等等之后...，Jenkins 作业将运行ng lint 和ng test 命令并输出允许@987654328 的结果@ / push / merge request 如果测试通过。

这样，开发人员就不需要一直手动运行ng test 和ng lint 命令，因为无论他们做什么，如果运行它们的作业没有通过，他们就会卡住。

您可以做的是为您的存储库强制执行持续集成流程，或者强制您的团队在他们的工作完成后检查并运行命令。

显然，首选更好。

【讨论】：

快速更新：您可以通过配置测试启动器（通常是业力）在运行 ng serve 的同时运行 ng test。例如，使用 karma，您可以将属性 singleRun 设置为 false，以便在您更改某些文件时它会重新启动测试。请注意不要推送配置更新，因为它可能会在您的 CI 链中创建无限循环。

【解决方案3】：

使用 Angular 构建器可以做到这一点。通过创建自己的构建器，您可以轻松调用现有的 Angular CLI 构建器。例如：

import { merge } from 'rxjs';
import { executeKarmaBuilder, executeDevServerBuilder } from '@angular-devkit/build-angular';

export function runTestAndServe(context: BuilderContext): Observable<BuilderOutput> {
  return merge(
    executeKarmaBuilder(KARMA_OPTIONS, context),
    executeDevServerBuilder(DEV_SERVER_OPTIONS, context)
  );
}

确保您的KARMA_OPTIONS 使用的是--watch。

【讨论】：

【解决方案4】：

@Reactgular 如果你想将它作为脚本添加到 package.json，你应该像这样添加它：

"scripts": {
    "ng": "ng",
    "start": "ng lint; ng serve --host=0.0.0.0 --poll 500 --disableHostCheck=true --source-map=true",
    "test": "ng test --watch=true --source-map=true --code-coverage --browsers Chrome",

}

【讨论】：