Running ng test and ng serve together

Question

I am a relative newbie in Angular 5, and am trying to setup a development setup for my team to build an Angular 5 application.

What I would like is for the team to be able to run linting & unit tests every time a change is made, and then serve up the changes so that the developer can immediately see the changes she is making.

I have tried the following:

Running ng lint will lint the project
Running ng test gets the Karma test runner started and any changes made to the code immediately kicks off the tests and provides feedback to the developer if any changes that were just introduced resulted in a broken test.
Running ng serve will internally start the webpack-dev-server and build the project and serve it, so that the added/modified functionality will immediately become visible for the developer to try and validate on the browser.

What I want to achieve is for the developers to get constant feedback on all three of the above aspects --- linting errors, broken tests, and serve the functionality --- as they continue to work on developing the project.

Is there a way to get all three of these running together and visible to the developers with each change made to the code?

You can just run all 3 at once in 3 different terminals. That's what I do. — Reactgular, Jan 10 '18 at 02:02
Here's a solid answer: https://stackoverflow.com/questions/30950032/how-can-i-run-multiple-npm-scripts-in-parallel — theMaestro73, Aug 14 '18 at 15:42

score 3 · Answer 1 · answered Jan 10 '18 at 02:14

3

You can run all three commands simultaneously using the & operator (don't confuse with &&). The operator will spawn the process but share the output in the console with the next process.

For example

ng test & ng server & ng lint

All three will run at once. You could put the above into a bash script to make it easier.

I did try adding this to package.json as a runnable script, but it didn't work.

answered Jan 10 '18 at 02:14

Reactgular

52,335
19
158
208

It's normal, since `ng serve` will start the server and wait until it's terminated, while `ng test` and `ng lint` are just executing some code and return a result (boolean) depending on the result. – Alex Beugnet Jan 10 '18 at 09:47

score 1 · Answer 2 · answered Jan 10 '18 at 09:55

The thing is you cannot run ng lint and ng test all the time, compared to ng serve which will run and will keep the live-reload awake until you terminate it.

This is why in general, people will integrate the unit tests in a Continuous Integration cycle, with a Jenkins Job / Pipeline in general and linked to their Repository with a WebHook or something like that.

In details, it would be something like after every commit / merge request / etc..., the Jenkins job would run the ng lint and ng test commands and output a result which would allow the commit / push / merge request if the tests pass.

That way, the people developing would not need to run manually all the time the ng test and ng lint commands, since whatever they do, if the Job running them doesn't pass they are stuck.

What you can do, is either enforce a Continuous Integration process for your repository, or enforce your team to check and run the commands when their work is done.

Obviously, the first choice is better.

Quick update : You can run ng test as you run ng serve by configurating your test launcher (usually karma). For example with karma, you can set the property `singleRun` to `false` so that it will re-launch the test when you change some files. Beware not to push the configuration update as it might create an infinite loop in your CI chain. — Alex Beugnet, Nov 28 '19 at 08:21

score 1 · Answer 3 · edited Dec 04 '20 at 13:52

It is possible to do this using Angular builders. By creating your own builder, you can easily invoke existing Angular CLI builders. For example:

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)
  );
}

Make sure that your KARMA_OPTIONS are using --watch.

score 0 · Answer 4 · answered Jan 24 '21 at 20:20

@Reactgular If you want to add it as a script to the package.json, you should add it like this:

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

}

Running ng test and ng serve together

4 Answers4