在VS Code中使用Angular / CLI，我可以在Builds的同时运行测试吗？

Question

我一直在VS Code的上下文中使用Angular / CLI。

在VS Code中的终端提示符下，可以调用ng serve或ng test - 但是有没有办法将两者结合起来（例如：ng serve test之类的东西）以便像我一样TDD，并且首先开发测试，我看到终端显示失败的测试，然后在编写代码以满足测试时变为绿色， AND 在另一个屏幕上看到网页结果？

谢谢！

Answer 1

npm脚本命令允许您使用＆amp;＆amp;组合命令。例如，新生成的项目具有如下定义的启动命令：

 "start": "ng serve"

您可以将其更改为：

 "start": "ng test && ng serve"

然后使用

启动应用

npm start

您还可以定义自己的npm脚本命令，例如

"serveWithTest": "ng test && ng serve"

然后你可以像这样运行它：

npm run serveWithTest

默认情况下，karma配置为在监视模式下运行，因此每次更改和保存代码时，测试都会自动重新运行。

更新。如果上述设置对您不起作用（根据有关Powershell的评论），您可以采用不同的方式进行设置。在package.json的脚本部分中添加以下两个命令：

"serve": "ng serve",
"preserve": "ng test"

在karma.conf.js中将属性singleRun修改为true。

运行测试并按如下方式提供服务：

npm run serve

Answer 2

我对此问题有两种解决方案：

使用2个终端的工作

• 只需打开2个终端
• 合二为一，运行ng serve
• 在另一个中，运行ng test

我尝试使用VS Code终端和传统的windows cmd终端。它有效，但它非常有限，并且意味着很多视觉污染。

使用npm包

的可分发解决方案

您可以使用名为npm的{​​{1}}包。此程序包可帮助您并行或按顺序运行多个npm-run-all任务。

跑步

npm

这将在项目的开发依赖项中安装npm install --save-dev npm-run-all 。

npm-run-all有两种模式：

• npm-run-all：并行运行多个任务
• run-p：按顺序运行多个任务

在项目的run-s文件的package.json部分，您现在可以添加：

script

您可以随心所欲地调用任务。我只是将dev任务"scripts": { ... "tdd": "run-p \"start\" \"test\"", "verify": "run-s \"test -- --watch=false\" \"lint\"", ... }, 命名为更明确的意图。

注意：您还可以使用另一个名为tdd的{​​{1}}个包，但我不确定是否按顺序运行模式。

此解决方案是可分发的：每个开发人员现在都能够在您的项目上执行npm并运行任务concurrently（或任何您想要调用的任务）。此外，您还可以创建要在构建工厂中运行的任务。这使您的项目可以集成到开发环境中。

Answer 3

2020-02-12，获胜10，VSC 1.42.0。项目具有节点/ Express API和Angular UI，希望同时调试API和UI。不，您只能调试一个，不能同时调试。 方法如下：

1，为您无法调试的部分打开一个cmd。

例如，运行ng serve来调试node / Express。或者，npm start调试Angular UI。

2，如果要调试Angular UI，请在VSC终端内运行ng serve。否则跳到3

3，启动相应的调试器