Github Actions for Angular Projects: CI/CD Pipeline for Testing, Building and ng update

01 Mar 2024
5 mins read

Maintaining Angular projects often involves a series of repetitive steps – testing, building, and updating packages. This blog post will demonstrate how GitHub Actions can automate these tasks, minimizing manual work and helping you deliver high-quality Angular applications faster.

Want the code? Go straight to GitHub

Github Action for testing and building

The first Github Action we will add to our repo is the default build pipeline. Go to the Actions tab and click on New Workflow.

Search by angular and select the Node.js Action by clicking on the Configure button.

A new yml file will be created under .github/workflows folder under the repository. We can give a different name (I like to name it build.yml or angular.yml) and also customize its contents:

Below is the content I use for all my Angular repos:

name: Angular Build

# {1}
    branches: [ "main" ]
    branches: [ "main" ]

    name: Angular Build
    runs-on: ubuntu-latest
        node-version: [20]
        # See supported Node.js release schedule at
      # {2}
      - name: Checkout the source code
        uses: actions/checkout@v3

      # {3}
      - name: Setup Node.js $
        uses: actions/setup-node@v3
          node-version: $
          cache: 'npm'
          cache-dependency-path: package-lock.json

      # {4}
      - name: Install dependencies
        run: npm ci
      # {5}
      - name: Run tests
        run: npm run test:ci
      # {6}
      - name: Build
        run: npm run build

Let’s dive into the details:

Once you create the file, commit the changes to your repository, and if you go back to the Actions tab, you can see the history of all builds:

With this step, you have a basic pipeline up and running. Even if I’m not deploying the application (it’s a sample project), I like to have this Github Action enabled to make sure my project works whenever I modify any code or update any dependency.

Enabling Dependabot

Next, we will Dependabot, which is a tool built in Github that checks for outdated dependencies and security vulnerabilities and raises a detailed PR to fix the vulnerability. It’s highly recommended to enable this option, and it’s a free service available.

To so, go to the Security tab and click on Enable dependabot alerts:

This will create another file under the .github folder named dependabot.yml:

You can set up the frequency you would like the scan to happen in your repository. Once the scans happen, if there are any package upgrades available, it will automatically create the PRs. And because we have set up the build pipeline, it will trigger and we can confirm if upgrading the dependency will break our application or not!

Automated ng update

Dependabot is a great tool, but when it comes to automated Angular upgrades, does not work perfectly, as we don’t want to only update the Angular version mentioned in the package.json file, but also go through the ng update process, as Angular CLI provides an automated tool to scan our code and automatically apply the code changes during the update from one version to the next version.

So we need a robust solution to do this. And there is a Github Action available called Ng Update to help us with this task.

Navigate to the .github/workflows path and Add File:

Create a file named ng-update.yml with the following content:

name: "Update Angular Action"
on: # when the action should run. Can also be a CRON or in response to external events. see
    - cron: '30 5 * * 1,3,5'

    runs-on: ubuntu-latest
      - name: Updating ng dependencies # the magic happens here!
        uses: fast-facts/ng-update@v1
          base-branch: main
          repo-token: $

We will run this Github Action using a cron schedule, which will run every Monday (1), Wednesday (3), and Friday (5) - you can customize the frequency according to your needs.

We will use the main branch and this Action will automatically create a PR after running the ng update command:

And in case you have Dependabot PRs as well, merge the ng-update PR first and the other dependabot Angular update PRs will be automatically closed:

This Action saves so much time and makes it much easier to keep the Angular projects up to date!

Video Tutorial

If video tutorials are your thing, we have one for you! Check out our YouTube tutorial for a visual guide.


Below are some Github repositories using the Actions mentioned in this tutorial so you can check out some different options:

Happy Coding!