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).!

YAML
 1
 2resources:
 3- repo: self
 4
 5phases:
 6- phase: "WebApp"
 7
 8  queue:
 9    name: your custom build agent queue name here
10
11  steps:
12
13 # install NPM packages
14
15   - task: Npm@1
16    displayName: NPM install Packages
17    inputs:
18      command: custom
19      workingDir: 'src' # edit this to your needs
20      verbose: false
21      customCommand: 'install --save' # you could use NPM ci as command too
22
23 # build applications
24
25  - task: Npm@1
26    displayName: NPM build
27    inputs:
28      command: custom
29      workingDir: 'src' # edit this to your needs
30      verbose: false
31      customCommand: 'run build:prod' # edit this to your needs
32
33
34 # copy output to build artifacts
35
36  - task: CopyFiles@2
37    displayName: Copy Files to: $(Build.ArtifactStagingDirectory)/app
38    inputs:
39      SourceFolder: 'wwwroot' # edit this to your needs
40      TargetFolder: '$(Build.ArtifactStagingDirectory)/app'
41
42# publish build artifacts
43
44  - task: PublishBuildArtifacts@1
45    displayName: "Publish artifacts"
46    inputs:
47      PathtoPublish: '$(Build.ArtifactStagingDirectory)/app'
48      ArtifactName: app
49      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.