Version Stamping your App with the Angular CLI

When building applications, you typically need some way to show the build version somewhere in your app. This can be tricky when using a closed-ecosystem tool like the Angular CLI. So how do we do it then??

Lets write a script that will get the Git hash and the version from the package.json. This looks something like this:

Lets hook this script up to run on postinstall of our application. So navigate to your package.json and add this line to the scripts:

{
scripts: {
"postinstall": "node version.js"
}
}

Now anytime we run npm i our app version will get updated for us.

This script will create a file in our environments folder called version.ts. It will look something like this:

We can now import that file in any component like:

Presto! Now we have our versions showing up in our app. That example just shows the semver but with the git script we have we can add the git hash too!

I’m #ngPanda

I hope you enjoyed the post, if you liked it follow me on Twitter and Github for more JavaScript tips/opinions/projects/articles/etc!

Like what you read? Give Austin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.