TFS 2015 Build: Angular CLI + Web API Project

If you are building a modern web applications using Angular (Angular2 or Angular 2x) for client side, ASP.NET Web API for server side (web server) and IIS is hosting platform, you might be interested to understand the two build automation and deployment options.

First, consider Angular UI and Web API as separate products and deploy their binaries separately into two different virtual directories. This is fairly straightforward approach and regular build process should just work. If you are happy with this option, you may skip rest of the article as rest explains the alternative approach.

Second, you might want to consider them as single product  by having separate projects (TypeScript project for Angular) in single solution in Visual Studio that would help to manage source code better and have simple deployment model that deploying them under single virtual directory in web server as naturally those two projects are hosted in and served by web server. Likely most of us prefer this approach unless Web API project is the API/App server tier and serving for multiple UI products. Alright, lets look into the back ground and steps to setup the build.

Challenge

While you decide to deploy them together in a virtual directory, the real challenge is how to run angular cli (npm) command for building Angular project, build Web API project then combine and deploy them together.  Please read further to understand the solution.

Environment and solution at high level

  • TFS 2015 – Use task based build system (different from legacy XAML based build), new build system is very neat, simple, provides numerous build tasks to support various tools such as npm, command like, MSBUILD, etc. in your build pipeline, a big relief if you not comfortable with MSBUILD scripts and easy to track changes to the build.
  • Angular CLI – Still, you are going to use Web Pack as primary build tool (and module loader/ resolver) through npm for TypeScript compilation, bundling, minification, AOT compilation, cache busting, etc. to produce deployment ready and production ready Angular binaries. Npm task in new build system comes to rescue for running the npm command.
  • Web API – Beside .NET project compilation, need to add a custom MSBuild script to copy angular output and package it part of WebDeploy so they can be deployed together.

<going to add screenshots explaining the steps>

I believe that this article is useful piece of information for you to automate your build. I did not find enough details when I try to setup one so thought to write it to explain a pattern that I explored, hope it works for you and many others too.