package versioning for Angular application is not updating automatically while uploading on artifactory

Question

I have an angular app with basic Hello world code. When I run this code on my local everything seems to be successful for npm build and automatic versioning being displayed on "welcome page UI" for every version bump automatically without any change being made on package.json each time I run build.

I have pushed the changes to Git repos on Azure DevOps, created a YAML pipeline and running the build tasks with below sequence : npm install npm run build Artifactory Npm - pack and publish (this step is publishing the .tgz file on jfrog artifactory)

I have issue on updating the .tgz file on artifactory with automatic versioning. Each time I run build pipeline I have to bump the version manually on package.json file and then run the pipeline to publish package on artifactory otherwise I am getting 404 error without changing package.json file.

Due to this I am unable to bind or display the version number from config file to the "welcome page UI"

Note : I am not sure if this makes difference but I am using organization proxy defined in .npmrc file

Which task are you using in Azure DevOps to publish the npm package to Artifactory? Is it the "Artifactory Npm" task? Also, can you please explain what you mean by "automatic versioning"? Which mechanism are you using to bump the version automatically? — Eyal Ben Moshe, Feb 01 '21 at 15:09
@EyalBenMoshe . I am using Artifactory NPM task -> pack and publish command to upload on npm local repository on artifactory. — divya29, Feb 01 '21 at 17:06
@EyalBenMoshe Also , I am just try to build through the CI pipeline using NPM build and pack, publish task to push the package on artifactory. I just need to bump the version of the package automatically whenever I trigger a new build without manually changing the version on package.json file everytime I run a build. — divya29, Feb 01 '21 at 17:08

score 0 · Answer 1 · answered Feb 02 '21 at 03:00

You can try below workarounds to auto bump the version.

1, Using npm version commamnd.

You can add a script task to run npm version command to update the package version. And then run git commands to push the updated version back to your azure git repo. See below example:

trigger: 
- master
pool:
  vmImage: 'windows-latest'

steps:

- checkout: self
  persistCredentials: true   #Leave the OAuth token in the Git config in order to run git push commands in following powershell task

- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- powershell: |
     git config --global user.email "you@example.com"
     git config --global user.name "Your Name"
     
     # increment the patch version by 1
     # create a version commit and tag 
     # use [skip ci] in the commit message to skip from triggering the ci pipeline.
     npm version patch -f -m "bump version [skip ci]"
     # push back to azure git repo
     git push origin HEAD:$(Build.SourceBranchName) -q
- task: Npm@1
  displayName: 'npm install'
  inputs:
    command: 'install'
  ....

In above example yaml pipeline. You will need to use checkout: self step and set the persistCredentials to true in order to run the git commands in the following powershell task. See checkout task.

In the poweshell task. The npm version patch -f command will increment the version patch by 1. See npm version document

-m "...[skip ci]" will prevent the commit from trigger the same pipeline again. See Skipping CI for individual commits

Using Counter expression and Magic chunks task

If you donot want to push the updated version number back to git repo. You can use this workaround.

Define the version variables in your yaml pipeline using counter expression. See below:

variables:
  major: '1'
  minor: '0'
  patch: $[counter(variables['minor'], 1)] #this will get reset when minor gets bumped. The number after Counter is the seed number 
  app_version: '$(major).$(minor).$(patch)'

Then you can use Magic chunks task to replace the version number in the package.json file. You can check out the example in this thread.

I did try the above process but still it throws error without bumping the version ,per haps the package in artifactory is increased and mismatches the package.json version number. — divya29, Mar 05 '21 at 22:23
Everytime I try to bump version I still have to edit "package.json" file to increase version — divya29, Mar 05 '21 at 22:24

package versioning for Angular application is not updating automatically while uploading on artifactory

1 Answers1