Angular: Setting Up a Build in Azure DevOps

Also available in portuguese

For an Angular web application, setting up a build pipeline in Azure DevOps could be out of fashion, but not when you love to automate everything 🙂

Angular: Setting Up a Build in Azure DevOps

My Blog is like public documentation with a lot of source code, much more than just small nonsense articles. It’s fun to write and help all mates developers.

I always check my Blog before searching the internet for clues or solutions.

This article is about to set up an Azure DevOps pipeline to build an Angular application.

#Angular Source Code

Even the focus is not the Angular code. I want to say thanks to my pal developer Lucas Juliano to provided that code that I had used to set up the Azure DevOps pipeline.

The source code is available for free in the GitHub.

Angular: Setting Up a Build in Azure DevOps 1

We use TypeScript to develop an Angular application and, when we save a source code file, automatically, it converts to Javascript.

If that application contains many components (or modules), each one of them has a Javascript file.

The idea is when the application is in the production server, all these Javascript files must be minified.

These days there are many features to concatenate and minify Javascript files, so if you are an ASP.NET developer, you may know Bundles that do just it.

All minification feature in Angular will also, minify CSS and HTML files.

#The Azure DevOps Build

I have abandoned the word Tutorial for this article, but I had written someones about Azure DevOps and its automation pipelines.

When I had received the Angular source code from Lucas Juliano, I had created a GIT project in Azure DevOps called FSL.AngularBuild.

Angular: Setting Up a Build in Azure DevOps 2

I had set up the Angular build directly using the branch master, but the correct way to do it is to create a specific branch and open a Pull Request to start the pipeline.

Over the menu Pipelines / Build, click the button New pipeline:

Angular: Setting Up a Build in Azure DevOps 3

Click on Use the classic editor:

Angular: Setting Up a Build in Azure DevOps 4

Choose Azure Repos Git and click Continue:

Angular: Setting Up a Build in Azure DevOps 5

Select Empty job template:

Angular: Setting Up a Build in Azure DevOps 6

That build screen is where we will add all tasks to build or Angular application.

Click on the plus icon in the Agent job 1 tab. In the search text, type Node.js tool installer and, click Add:

Angular: Setting Up a Build in Azure DevOps 7
Angular: Setting Up a Build in Azure DevOps 8

Do the same as before but search for Nuget tool installer:

Angular: Setting Up a Build in Azure DevOps 9

Now search for NPM and configure it for NPM install:

Angular: Setting Up a Build in Azure DevOps 10
Angular: Setting Up a Build in Azure DevOps 11

Then add one more NPM task and configure it for NPM build angular:

Angular: Setting Up a Build in Azure DevOps 12
Angular: Setting Up a Build in Azure DevOps 13

The RUN BUILD command means that it will look for a task with the same name inside the package.JSON file.

ng build --prod --build-optimizer --named-chunks=true --output-path=bundles --deploy-url=bundles/

Add a task called Archive files to compact all files that will be minified:

Angular: Setting Up a Build in Azure DevOps 14
Angular: Setting Up a Build in Azure DevOps 15

A least add the task Publish build artifacts to store all minified files:

Angular: Setting Up a Build in Azure DevOps 16

After all those configuration steps, juts click Save and Queue to start a new build.

At the end of the build, all task will show up like this:

Angular: Setting Up a Build in Azure DevOps 17

At the top of that screen is localized, an Artifacts button to download all code ready for the production server.

Angular: Setting Up a Build in Azure DevOps 18

#Continous Integration

To set up a build in Azure DevOps to run every time a branch is updated, just following the steps above:

Angular: Setting Up a Build in Azure DevOps 19

In the Triggers tab, enable the Enable continuous integration option and choose a correspondent branch.

In that case, the build will run every time the branch master updated.

#Final considerations

We are using that build process for more than two years and, the only error that had occurred in that time was when the NodeJs versions changes.

The Azure DevOps uses the last NodeJs version to do all work, but sometimes it is preferred to force a specific version instead. There is a task to accomplish that.

And about you, do you have a different approach to build an Angular application in the Azure DevOps?

Please comment and share with us.

Thank you for reading 🙂

About the Author:
He works as a solution architect and developer, has more than 18 years of experience in software development on several platforms and more than 16 years only for the insurance market.