Getting started with TsLint and tslint-consistent-codestyle in Angular 5+ projects, Part 2: VSTS builds integration

 

Introduction

This article will help you configure TSLINT and some more code style rules to enforce consistent code style in your Angular application.
We are using Angular 5 in Visual Studio Code for this tutorial and VSTS to run a Continuous Integration (CI) build.

Step 1

Create a build definition in VSTS.

Configure your source repository location.

Step 2

Setup your agent phase, name it and select an Agent queue:

Step 3

Install dependencies simply by selecting the “install” command:

Step 4

Configure the build using a “custom” command like this:

Step 5

Configure TsLint using a “custom” command like this:

Step 6

Run the VSTS CI build and check your log 😊

If your code doesn’t respect your TsLint rules it should make your build fail:

 

Good luck 😉

How to run unit tests in a VSTS CI build with Angular 5 and PhantomJS Part 2

<< Previous article (Part 1)

Configure VSTS CI build for Angular 5 projects

We saw previously how to configure our projet to make the CI running properly in VSTS.

Now let’s see each steps to configure our CI build to making running unit tests with PhantomJS.

All following steps use npm tasks and I will use npm commands, not NG

Step 1, install Angular-CLI globally

This step is not required if you installed the CLI locally like me, because i want to be able to work with different versions depending project i’m working on.

Set up as follow the installation :

Step 2, install project dependencies

Step 3, install project dependencies

Build the project

Step 4, run the tests

Choose here custom task and set as command the command we defined earlier in the project in scripts block of packages.json

"scripts": { 
"ng": "ng", 
"start": "ng serve", 
"build": "ng build", 
"test": "ng test", 
"lint": "ng lint", 
"e2e": "ng e2e", 
"test-single-headless": "run test --single-run=true --browsers=PhantomJS --reporters=progress" 
},

That’s it!

Now your output should look like this :

 

Awesome isn’it ? 😉