April 30, 2020
Display the version and git hash in Angular
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
|
1 2 3 4 5 6 7 8 9 |
{ "name": "app", "version": "0.0.0", "scripts": { ... "postinstall": "node git-version.js", ... } } |
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.
|
1 |
ng add @w11k/git-info |
We will automatically
- add required devDependencies to your
package.json - add a script
git-version.jsin the same folder where yourpackage.jsonis - add a npm
postinstall-hook to thesciptssection of yourpackage.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component } from '@angular/core'; import { VERSION } from '../environments/version'; // import the automatically generated file @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; constructor() { // use the properties of the VERSION constant console.log(`Application version is: version (from package.json)=${VERSION.version}, git-tag=${VERSION.tag}, git-hash=${VERSION.hash}`); } } |
Further Reading
Kai Henzler
Developer at 
Kai belongs to the generation, which grew up with the internet. His motto is „keep it simple“, which he applies both in web development with AngularJS and as a trainer.
Thanks for your valuable information,you have given very useful and important information.
https://nareshit.com/angularjs-online-training/
Inspiring writings and I greatly admired what you have to say, I hope you continue to provide new ideas for us all and greetings success always for you…Keep updating more information…
reactjs online training
Thank you so much for sharing all this wonderful information !!!! It is so appreciated!! You have good humor in your blogs. So much helpful and easy to read!