Creating Angular Build Definition in Azure CI Pipeline

If you want to create Build definition for Angular project in Azure DevOps, then this article is for you. Login to Dev Azure and go to the pipelines and follow the instructions below:

• Click on new pipeline

• Use classic editor

• Connect to repo

• Tag your repository on success

• Install npm packages

• Build angular project

• Copy Files to staging directory

• Archive Files

• Publish artifacts to Drop folder

---

pool:
  name: Azure Pipelines
  demands: npm

steps:
  - task: Npm@1
    displayName: 'npm install'
    inputs:
      verbose: false

  - task: Npm@1
    displayName: 'npm build'
    inputs:
      command: custom
      verbose: false
      customCommand: 'run build:apps'

  - task: CopyFiles@2
    displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
    inputs:
      SourceFolder: '$(Build.SourcesDirectory)/dist'
      TargetFolder: '$(Build.ArtifactStagingDirectory)'

  - task: ArchiveFiles@2
    displayName: 'Archive $(Build.ArtifactStagingDirectory)'
    inputs:
      rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
      includeRootFolder: false

  - task: PublishBuildArtifacts@1
    displayName: 'Publish Artifact: drop'

Running Angular Build on Azure Devops

Once you run angular build on azure devops. Then you will see it will create a job and execute all task mentioned in build definition.

Where Drop folder goes?

Final archived folder will go at $(System.DefaultWorkingDirectory)/$(Build.BuildId) location.

Drop folder will have buildid.zip file inside that you will have both apps and libs folders.

What drop folder has?

Drop folder has both apps and libs folders.

Become full stack developer 💻

If you want to become full stack developer and grow your carrier as new software developer or Lead Developer/Architect. Consider subscribing to our full stack development training programs. We have All-Access Monthly membership plans and you will get unlimited access to all of our video courses, slides, source code & Monthly video calls.

• Please subscribe to All-Access Membership PRO plan to access current and future angular, node.js and related courses.
• Please subscribe to All-Access Membership ELITE plan to get everything from PRO plan. Additionally, you will get access to monthly live Q&A video call with Rupesh and you can ask doubts/questions and get more help, tips and tricks.

Your bright future is awaiting for you so visit today FullstackMaster and allow me to help you to board on your dream software company as a Developer,Architect or Lead Engineer role.

💖 Say 👋 to me!

Rupesh Tiwari

www.rupeshtiwari.com

✉️ Email Rupesh

Founder of Fullstack Master