Version Angular Application

Jul 10th, 2020 - written by Kimserey with .

In frontend application, it is common to have the version displayed on the footer which allows us to quickly debug which version is getting served by our server. In today’s post, we’ll look at how we can get the version baked into the bundle so that it can be used and displayed on the frontend of an Angular application.

• Setup Postinstall Script
• Display the Version

Setup Postinstall Script

In frontend applications, the version is controlled by the package.json version property:

1
2
3
4
5
{
  "name": "my-application",
  "version": "1.0.10",
  ...
}

The problem with Angular, or SPA is general, is that the whole application is bundled in a JavaScript file served to the browser hence we have to bundle the version number in it as well if we want to make it availabe.

The way to do that is by using a postinstall script. We start by creating the following version.js script that we put in the root of the repository:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const { resolve } = require('path');
const { writeFileSync } = require('fs-extra');
const { version } = require('./package.json');

/**
 * Generates an updated `version.ts` file used in production
 * to stamp the application.
 */
writeFileSync(
  resolve(__dirname, 'src', 'environments', 'version.ts'),
    '// This file is auto-generated on postinstall from "version.js".\n' +
    `export const version = '${version}';\n`,
  {
    encoding: 'utf-8'
  }
);

This creates a file version.ts in src/environments/version.ts which contains the following:

1
2
// This file is auto-generated on postinstall from "version.js".
export const version = '1.0.10';

The version is taken from ./package.json which as we saw earlier is the place where the version of the application is defined. Then we use the postinstall script functionality of npm:

1
2
3
4
5
6
7
8
{
  "name": "my-application",
  "version": "1.0.10",
  "scripts": {
    "postinstall": "node version.js",
  },
  ...
}

This will run node version.js after every npm install which will create the version file.

Display the Version

Now that we have a version file containing the correct version on src/environment/version.ts, we can import the value in our environment files, like environment.ts and environment.prod.ts.

1
2
3
4
5
6
import { version } from './version';

export const environment = {
  production: false,
  version,
};

And then make use of it in a component:

1
2
3
4
5
6
7
8
import { environment } from '../../environments/environment';

@Component({
  templateUrl: './app.component.html',
})
export class AppComponent {
  version = environment.version;
}

1
2
3
4
5
<router-outlet></router-outlet>

<div class="text-right">
  <small class="px-1"> © 2000-2020  - v{{ version }} </small>
</div>

We now have the version displayed directly on the frontend. And that concludes today’s post!

Conclusion

Today we looked at how we could display the version of our Angular application on a component. We started by defining a version script which would keep an environment variable always up-to-date and we then moved on to see how we could use that variable in a component. I hope you liked this post and I see you on the next one!