Display the version and git hash in Angular

In this post I will explain the process to you that we at W11K use to display the git-hash and application version in our Angular Apps. I will briefly explain the motivation why we want to do this and show you how to use our Open Source package to easily add this to you Angular App.

Motivation

We at W11K maintain a lot of Angular Apps for our clients. Ever so often a bug report comes in and what’s the first thing you do with a bug report? You try to reproduce it.

Wouldn’t it be nice to checkout the exact same state of the code that is deployed remotely on your local development setup? But how do you know if the deployed version is the latest commit?
You can’t really be sure what exactly is deployed in the production environment unless you have access to the build-server, the deployment pipeline or the server itself. In some cases due to legal registrations your customers don’t want you to have access to those. This is where it can come in handy if you could directly see which version is deployed when you open the application in the production environment. The Version number could be displayed in the settings page, in the footer oder just be logged in the console.

Implementation Concept

A popular way to implement having access to git infos in your deployed application was highlighted by some other articles in the web. I first discovered the core approach we used in our library by this blog post by Austin in 2018.

The basic idea is to execute a javascript script to extract the git infos and place them inside a generated Typescript file called version.ts before the actual build of your applications starts. In your application you can reference the file like any normal TS file, the difference is that the content of the file is replaced automatically. This approach only works if you exclude the generated file from git and we have to make sure to update it whenever needed.

The update of the git infos can be done by a fairly simple trick. We assume that if you deploy a new version of your App, you’ll most likely create a production build using a build server like GitLab, Jenkins etc. Because you want to have a clean state every build you’ll most likely execute a npm install as part of your build pipeline. What you might not know is that npm provides some hooks where you can hook into. In our case we can trigger the generation of our version.ts file after the installation of the node_modules. To do that we can simply add a property “postinstall”: “node git-version.js” to our package.json file

I’m not going through the content of the git-version.js file, but you can look it up if you’re interested. I will now go ahead and show you how easy it is to include this whole concept into an existing Angular App using just one statement.

Installation (via Angular schematics)

The angular cli is built to be extensible. You might already generate components using the cli using commands like “ng generate component my-component”. The concept is called Angular schematics and you can not only generate components but also include whole feature sets and third party libraries with a one-liner. You might have used Angular Material in the past. Adding it do your project is as simple as typing “ng add @angular/material” into your terminal.

The installation of the our schematic is as easy as it get’s. You just have to execute the following statement in your Terminal and the angular-cli and our custom schematic will do the rest for you.

We will automatically

• add required devDependencies to your package.json
• add a script git-version.js in the same folder where your package.json is
• add a npm postinstall-hook to the scipts section of your package.json
• add the automatically generated file to the .gitignore

Usage

Since the latest git-infos are now stored in an exported constant in the version.ts, we can import it anywhere in our application and use it in Services, Components, Modules and so on. Here is the root AppComponent, that imports the version from the version.ts file and logs the application version to the Browsers console. Note that the property VERSION.version represents the version set in your package.json

Further Reading

• https://github.com/w11k/angular-git-info
• https://medium.com/@amcdnl/version-stamping-your-app-with-the-angular-cli-d563284bb94d
• https://www.npmjs.com/package/@w11k/git-info
• https://docs.npmjs.com/misc/scripts