Setup VSTS YAML builds for your Angular app
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: [email protected] 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: [email protected] 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: [email protected] displayName: Copy Files to: $(Build.ArtifactStagingDirectory)/app inputs: SourceFolder: 'wwwroot' # edit this to your needs TargetFolder: '$(Build.ArtifactStagingDirectory)/app' # publish build artifacts - task: [email protected] 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
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.
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: