Setup VSTS YAML builds for your Angular app

Idea

According to the ASP.NET Core YAML build sample, this sample covers the Angular part.

I recommend an own build agent, because the Hosted 2017 agent does not provide the latest NPM/NodeJS version, no NPM package caching and is really slow (for Angular builds).!

resources:
- repo: self

phases:
- phase: "WebApp"

  queue:
    name: your custom build agent queue name here

  steps:

 # install NPM packages

   - task: Npm@1
    displayName: NPM install Packages
    inputs:
      command: custom
      workingDir: 'src' # edit this to your needs
      verbose: false
      customCommand: 'install --save' # you could use NPM ci as command too

 # build applications

  - task: Npm@1
    displayName: NPM build
    inputs:
      command: custom
      workingDir: 'src' # edit this to your needs
      verbose: false
      customCommand: 'run build:prod' # edit this to your needs


 # copy output to build artifacts

  - task: CopyFiles@2
    displayName: Copy Files to: $(Build.ArtifactStagingDirectory)/app
    inputs:
      SourceFolder: 'wwwroot' # edit this to your needs
      TargetFolder: '$(Build.ArtifactStagingDirectory)/app'

# publish build artifacts

  - task: PublishBuildArtifacts@1
    displayName: "Publish artifacts"
    inputs:
      PathtoPublish: '$(Build.ArtifactStagingDirectory)/app'
      ArtifactName: app
      publishLocation: Container

Use YAML exports

With the enabled YAML build preview feature you can export your existing VSTS build definitions as YAML builds. Just open the definition and click on View YAML

Right now, you get a warning about undefined variables in your YAML builds - but you can ignore this error, if you are just using the VSTS default variables.

Official documentation

YAML builds are still in prview, so some features of VSTS dont work with YAML build (like build badges): VSTS: How to use YAML builds

Abel Wang from Microsoft uploaded a great video about VSTS YAML builds on YouTube: