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

Comments