How to build Angular in Azure DevOps

We can add NodeTool task as a step and configure as following

  - task: NodeTool@0
    displayName: "Install Node.js"
    inputs:
      versionSpec: 14.x

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"
    inputs:
      command: "custom"
      customCommand: "install -g @angular/cli"

Now we need to install all the required packages to run angular application.

  - task: Npm@1
    displayName: "Install npm packages"
    inputs:
      command: "install"
      verbose: true

We have our build environment ready now. Let's build the angular app

  - task: CmdLine@2
    displayName: "Build Angular app"
    inputs:
      script: 'ng build --prod'

let's check if there are any angular violations in our code.

  - task: CmdLine@2
    displayName: "Validate Angular violations"
    inputs:
      script: "ng lint"

Running unit test also simple as any of the tasks we used in earlier steps.

  - task: CmdLine@2
    displayName: "Run Angular tests"
    inputs:
      script: "ng test --browsers=ChromeHeadless --code-coverage --watch=false"

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');
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-junit-reporter')
    ],
    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"
    inputs:
      testResultsFiles: "TestResults/junit/TESTS*.xml"
      mergeTestResults: true
      testRunTitle: "Angular Tests"

To publish code coverage results, we are using PublishCodeCoverageResults task.

  - task: PublishCodeCoverageResults@1
    displayName: Publish code coverage
    inputs:
      codeCoverageTool: Cobertura
      summaryFileLocation: "TestResults/coverage/cobertura-coverage.xml"
      reportDirectory: "TestResults/coverage"

Now we validated the build and ready to upload the output as an artifact.

  - task: PublishBuildArtifacts@1
    displayName: "Publish Artifact: Angular"
    inputs:
      PathtoPublish: "$(Build.SourcesDirectory)/dist"
      FileCopyOptions:
      ArtifactName: "Angular"
      publishLocation: "Container"