How to version number angular applications

It’s good to have a version number of the published web application. I came across this issue a couple of weeks ago, and I would like to share my experience with you.

Our first approach was to add a version number to the environment file (`environment.ts`), keep it in sync with the production environment file(environment.prod.ts), and increment it manually after a new release. It’s hard to maintain, and uses a lot of time to transfer this logic to a ci/cd pipeline. We wanted something simpler and more effective, also not using 3rd-party libraries, finally we got the best solution for us.

Briefly: we will import the version number from the package.json into our environment files, and change the `npm build` command to include an automatic version number increment in`package.json` file. You will needangular/cli, npm, @types/node, and git(you should already have these prerequisites).

Step 1:

We need to use the `require` node function in our environment files, so we have to add node types to the compiler options. Open tsconfig.app.json and tsconfig.spec.json files (usually they are located under the ‘src’ folder), add “node” under compilerOptions -> types

...
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "types": [
      "jasmine",
      "node"
    ]
  }
...

Note: Be sure to have included ‘@types/node’ as a dependency in your ‘package.json’ file.

Step 2:

Now open environment.ts (‘src\environments\environment.ts’) and create a property for holding the application version in environment variable as follows ( in our case this will be `appVersion`) :

export const environment = {
  appVersion: require('../../package.json').version + '-dev',
  production: false
};

Be aware, the path to package.json must be calculated from the environment file’s location.

The require(‘../../package.json’).version will load the version number from the package.json file and + ‘-dev’ will add the ‘-dev’ suffix to it. The suffix isn’t a must, but this way you can identify which environment file is used for running your application

Following the same approach we have to edit the production environment file as well. In the end the environment.prod.ts will look like this:

export const environment = {
    appVersion: require('../../package.json').version,
    production: true
};

Step 3:

Add version number to a component and show it in the application. For example:

import {Component} from '@angular/core';
import {environment} from '../environments/environment';

@Component({
    selector: 'app-root',
    template: `<h1>{{title}}</h1>
    <h3>v{{currentApplicationVersion}}</h3>`
})
export class AppComponent {
    title = 'Demo application for version numbering';
    currentApplicationVersion = environment.appVersion;
}

the result in development mode:

Development mode

Production mode:

Production

So now changing the version number in the package.json file will be reflected in the application.

Step 4:

Our last mission in automatically increase build number in the version property. For this we will use npm version functionality. You can specify which parts of the version number to be incremented. For this you should know how a version number is structured: major.minor.patch

We will run npm version patch in a prebuild script. The patchargument means, only the patch number will be incremented with 1. This script also creates a new commit and ads a tag with the new version number to the new commit. If you want to omit automatic commit and tag creation you have to use the —- no-git-tag-version flag. Running npm run build will automatically run the prebuild script as first step.

Our current package.json:

{
  "name": "application-versioning",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "prebuild": "npm --no-git-tag-version version patch",
    "build": "ng build --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

After running the command

npm run build

the application version patch number will increment with 1, so it will look like this:

{
  "name": "application-versioning",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "prebuild": "npm --no-git-tag-version version patch",
    "build": "ng build --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
...

And visiting our new release will look like this:

Production after build script

For more info about npm version you can check out the official documentation here.

Happy coding!