同时运行ng test和ng serve

Question

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

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

我尝试了以下内容：

• 运行ng lint将会对项目进行linting
• 运行ng test启动Karma测试运行器，并立即启动测试以提供反馈，如果刚刚引入的任何更改导致测试失败，则会向开发人员提供反馈。
• 运行ng serve将内部启动webpack-dev-server并构建项目并提供服务，以便添加/修改的功能将立即在浏览器中可见，供开发人员尝试并验证。

我想要实现的是，在开发人员继续开发项目的过程中，他们可以获得有关上述三个方面的持续反馈- linting错误、测试失败以及提供的功能。

是否有一种方法可以让所有这三个方面都同时运行，并在每次代码更改时向开发人员显示？

- Mark Hamill

---

你可以在三个不同的终端中同时运行这三个程序。这就是我所做的。 - Reactgular

这是一个扎实的答案：https://dev59.com/8V0Z5IYBdhLWcg3w4zkm - theMaestro73

Answer 1

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

例如：

ng test & ng server & ng lint

三者将同时运行。您可以将上述内容放入Bash脚本中以使其更易于使用。

我尝试将此添加到package.json作为可运行脚本，但它没有起作用。

- Reactgular

---

这是正常的，因为 ng serve 会启动服务器并等待它终止，而 ng test 和 ng lint 只是执行一些代码并返回一个结果（布尔值），具体取决于结果。 - Alex Beugnet

Answer 2

事实上，与可以运行并保持实时重载的ng serve相比，你不能一直运行ng lint和ng test。因此，通常人们会将单元测试集成到持续集成周期中，使用Jenkins Job / Pipeline等工具，并将其与仓库和WebHook等内容相关联。具体而言，每次提交/合并请求等操作后，Jenkins Job将运行ng lint和ng test命令，并输出结果，如果测试通过，则允许提交/推送/合并请求。这样，开发人员就不需要手动运行ng test和ng lint命令了，因为无论他们做什么，只要运行这些命令的Job未通过，他们就会被卡住。你可以强制执行仓库的持续集成流程，或者强制你的团队在完成工作后检查并运行这些命令。显然，第一种选择更好。

- Alex Beugnet

---

快速更新：您可以通过配置测试启动器（通常是karma）来运行ng test，就像运行ng serve一样。例如，使用karma，您可以将属性singleRun设置为false，这样当您更改某些文件时，它将重新启动测试。但要注意不要推送配置更新，因为它可能会在CI链中创建无限循环。 - Alex Beugnet

Answer 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参数。

- blid

Answer 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",

}

- fvukovic