Deploy Angular App Using Azure DevOps Build and Release Pipelines

How to easily deploy the Angular app to Azure by configuring build and release pipelines in Azure DevOps

Release Pipeline Tasks Output

Introduction

I know that there are many articles on this topic, but with the latest pipeline configuration, most of the solutions didn’t work for me, so, I thought I would write this piece and share what I’ve found. Here, we are going to set up a Build and Release pipeline configuration of our Angular application by following a few basic steps. We will be using the Azure DevOps FTP pipeline service connection for the configuration. Enough with the introductions, let’s jump into the configuration.

Background

When I was trying to deploy my Angular application to Azure, I wanted to set up my build and release pipelines. I had followed some tutorials, but I was still running into some issues. Later, I decided to use the Azure FTP Upload Release Task, so we will be having only one task in our Release pipeline.

The Build Pipeline

Let’s begin by configuring the Azure DevOps build pipeline. But, first, we need to define our script in the package.json file:

If you have different routes and need to access them directly in the URL of the browser, you should consider adding a web.config file to your src folder:

Once that is done, add it as an asset in the angular.json file.