Thought it was about time I published something else on here!!

Myself and a friend (Mike), we are both freelance, have similar thinking around continous education as in it is an absolute must. To this end we have decided to knock up a “Playground” system for us to try a few things out in terms of design, architecture, testing, coding, DevOps, Benchmarking etc. etc.

Mike has UI skills where I do not (!!) so he knocked up what he calls a “billy basic” Angular 8 application as a starter for ten. He passed over the code to me and I popped it into an Azure DevOps project; no need to go over that process here since it’s been covered a million times elsewhere.

So then on to the CI build; as a devleoper who has only attempted Azure DevOps builds with .NET\.NET Core it quickly became obvious that this was not going to be particularly straightforward for someone with zero Angular experience.

I wanted to use YAML to define the build (a first for me) so off to Google I went hunting for something to get me started and came across this article by Daniel Oliver - Angular 7 with Azure DevOps Build Pipeline which looked like a good starting place even though we were on Angular 8 for our application.

The YAML file on the site looks like this….

variables:
  buildConfiguration: 'Release'

steps:

- task: Npm@1
  displayName: 'npm install'
  inputs:
    command: install
    workingDir: src/angular7

- task: Npm@1
  displayName: 'Build Angular'
  inputs:
    command: custom
    customCommand: run build -- --prod
    workingDir: src/angular7

- task: PublishPipelineArtifact@0
  inputs:
    artifactName: 'angular'
    targetPath: 'src/angular7/dist
}

I had to modify the directories but apart from that I ran a build with the above.

The first error I got was…

##[error]Error: Npm failed with return code: 1

Hmmmm….after another raft of searching I could see that people were talking about a Visual 2017 Hosted agent as being the one to use so added the following after the variables definition: -

jobs:
- job: HostedVS2017
  pool:
    vmImage: 'vs2017-win2016'

Running the build again I get a similar error, not good. When I was speaking with Mike a couple of hours ago he was asking me to run ‘node –version’ so I thought it might be a good idea to add a known good version of Node, as per my Dev environment, into the YAML: -

   - task: NodeTool@0
      inputs:
        versionSpec: '10.16.3'

Still no cigar!! Having another poke around the tinternet it became clear (sorry, forgot to record the article link!) “customCommand: run build – –prod” was actually referring to something in the package.json file, now this is probably very obvious to an Angular Dev but I’m not one of those people! So another change to the YAML, this time a modification to the build task: -

     - task: Npm@1
      displayName: 'Build Angular'
      inputs:
          command: custom
          customCommand: run build
          workingDir: src

OK, so this is looking a bit better…or maybe not!! The original error has gone away but now I’m left with a failure relating to the publish task. This one was easier to fix, I just set the targetPath of the publish task to $(Pipeline.Workspace) as follows: -

 task: PublishPipelineArtifact@0
      inputs:
          artifactName: 'angular'
          targetPath: '$(Pipeline.Workspace)'

Someone go and fetch the champagne, the build is green!!

The final incarnation of the YAML file….

variables:
  buildConfiguration: 'Release'

jobs:
- job: HostedVS2017
  pool:
    vmImage: 'vs2017-win2016'

  steps:

    - task: NodeTool@0
      inputs:
        versionSpec: '10.16.3' 
    
    - task: Npm@1
      displayName: 'npm install'
      inputs:
          command: install
          workingDir: src

    - task: Npm@1
      displayName: 'Build Angular'
      inputs:
          command: custom
          customCommand: run build
          workingDir: src

    - task: PublishPipelineArtifact@0
      inputs:
          artifactName: 'angular'
          targetPath: '$(Pipeline.Workspace)'

Is this a perfect YAML file for an Angular 8 application? Definitely not but it’s a start and I’ve learned something so all good!