How to build Angular in Azure DevOps

With previous article we discussed on <a target="_blank" title="How to configure Azure DevOps CICD" href="">How to configure Azure DevOps CICD</a>. In this article we will continue to explain how to build and run unit test with Azure DevOps for Angular applicaitons.
With previous article we discussed on How to configure Azure DevOps CICD. In this article we will continue to explain how to build and run unit test with Azure DevOps for Angular applicaitons.

Setting up the angular project

To start with the article, we need to create an angular application first. If you are new to Angular, you can follow the steps in "Getting started with Angular Initial Application" to initiate angular application. In this article we will not create any additional stuff in the angular application, instead we will use the default application.

Setup Azure DevOps pipeline

As explained in the previous article How to configure Azure DevOps CICD, lets create devops pipeline.

It will add a new file called azure-pipelines.yml into root folder of the project.

We can modify the content of the azure-pipelines.yml file to include following steps.
  • Install node.js
  • Install angular CLI
  • Install npm packages
  • Build angular application
  • Validate angular violations
  • Run angular unit tests
  • Publish test results
  • Publish code coverage results
  • Publish output

Let's have a detail look on how we can do those.

Install node.js

We can add NodeTool task as a step and configure as following
  - task: NodeTool@0
    displayName: "Install Node.js"
      versionSpec: 14.x

Install angular CLI

Now we have node.js installed and it is time to install angular CLI tool globally. Same as the previous, but lets add npm task this time.
  - task: Npm@1
    displayName: "Install Angular cli"
      command: "custom"
      customCommand: "install -g @angular/cli"

Install npm packages

Now we need to install all the required packages to run angular application.
  - task: Npm@1
    displayName: "Install npm packages"
      command: "install"
      verbose: true

Build angular application

We have our build environment ready now. Let's build the angular app
  - task: CmdLine@2
    displayName: "Build Angular app"
      script: 'ng build --prod'

Validate angular violations

let's check if there are any angular violations in our code.
  - task: CmdLine@2
    displayName: "Validate Angular violations"
      script: "ng lint"

Run angular unit tests

Running unit test also simple as any of the tasks we used in earlier steps.
  - task: CmdLine@2
    displayName: "Run Angular tests"
      script: "ng test --browsers=ChromeHeadless --code-coverage --watch=false"

Publish test results

Here we are using PublishTestResults task. However, in azure devops it required test results to be in JUnit, NUnit, VSTest, xUnit or cTest format. So we have to convert our test results to any of those formats. Let's use JUnit for this in few steps.

We are using karma-junit-reporter package here. You can install the package using following command

npm install karma-junit-reporter --save-dev

Now we need to update the karma.conf.js file as following.

  • Add karma-junit-reporter to plugins section
  • Add cobertura to coverageReporter reporters section
  • Add junit to reporters section
  • Add junitReporter section

module.exports = function (config) {
  let testResultFolder = require('path').join(__dirname, '../../TestResults');
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
    client: {
      jasmine: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    coverageReporter: {
      dir: require('path').join(testResultFolder, 'coverage'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' },
        { type: 'cobertura' }
    junitReporter: {
      outputDir: require('path').join(testResultFolder, 'junit')
    reporters: ['progress', 'kjhtml', 'junit'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true

Now we can use the PublishTestResults task

  - task: PublishTestResults@2
    displayName: "Publish Angular test results"
      testResultsFiles: "TestResults/junit/TESTS*.xml"
      mergeTestResults: true
      testRunTitle: "Angular Tests"

Publish code coverage results

To publish code coverage results, we are using PublishCodeCoverageResults task.
  - task: PublishCodeCoverageResults@1
    displayName: Publish code coverage
      codeCoverageTool: Cobertura
      summaryFileLocation: "TestResults/coverage/cobertura-coverage.xml"
      reportDirectory: "TestResults/coverage"

Publish output

Now we validated the build and ready to upload the output as an artifact.
  - task: PublishBuildArtifacts@1
    displayName: "Publish Artifact: Angular"
      PathtoPublish: "$(Build.SourcesDirectory)/dist"
      ArtifactName: "Angular"
      publishLocation: "Container"

Now we have the valid output attached to azure devops pipeline as an artifact. We can use the files in the artifact to deploy angular application

Hope you enjoy the tutorial and see you soon in another very exiting tutorial