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 🙂
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.
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.
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:
Click on Use the classic editor:
Choose Azure Repos Git and click Continue:
Select Empty job template:
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:
Do the same as before but search for Nuget tool installer:
Now search for NPM and configure it for NPM install:
Then add one more NPM task and configure it for NPM build angular:
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:
A least add the task Publish build artifacts to store all minified files:
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:
At the top of that screen is localized, an Artifacts button to download all code ready for the production server.
#Continous Integration
To set up a build in Azure DevOps to run every time a branch is updated, just following the steps above:
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 🙂
