一起运行 ng test 和 ng serve

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?

Answer 1

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.

Answer 2

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.

Answer 3

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 .

Answer 4

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

}