Building Angular-CLI on Visual Studio Team Services ("VSTS")

With the advent of Angular-CLI, the making and maintaining of an Angular 2 project has become significantly easier.  Now, the project solution needs to become more "enterprise-y".  So, we'll add this to our VSTS to store our source code, build and deploy on our Azure subscription.  This post will focus on getting a successful build on VSTS.  This is what I mean by a successful build:

• get/install all necessary modules from npmjs.com
• get/install all necessary modules for angular-cli
• perform an "ng build" on the angular-cli project
• put the project's javascript bundles in a drop location for deployment

Creating the Build Definition

1. On VSTS, navigate to Builds, click on the "New" button.
   
2. Select "Visual Studio" for the build template.
   
3. Select the Repository source.  I'm keeping my code in TFS, Observe, there are other options. 
   
   
   
4. Click "Create"

Overview

At this point, let's take a look at what we're shooting for.  This seems like a hack, at this point.  But, it gets past some niggling errors.

Adding Task Runners to the Definition

1. The first npm task runner will get/install all modules listed in your package.json. 
1. npm command: install 
2. arguments: (empty)
   
2. The next npm task runner will get/install all modules that applies to angular-cli.  
1. npm command: install
2. UPDATE 3/8/17 arguments: -g @angular/cli
3. UPDATE 3/8/17: Do another npm install 
1. npm command: install 
2. arguments: (empty)
   
4. The last npm task runner will perform's angular-cli's "ng build" command.
1. npm command: run-script
2. arguments: build
5. The previous step references a property in package.json.  Make sure this entry appears in that file.
6. Let's put the projects bits somewhere.  Then, the Release process will have a pickup point to deploy our application.  The VSTS agent will find our bits in the "dist" folder.(Contents: **\dist)  It will place them in a folder called "drop" (Artifact Name: drop, Artifact Type: Server).
7. Save the build definition

Summary

So, with those steps, you should be able to get source, build an angular-cli, build your project and deploy your output to a location for further processing.

Woof!