How to Include Version, Git Commit, and Build Date in Your Angular Builds

Knowing the exact version of your Angular app can be really helpful. This article will teach you how to add your app's package version, git commit hash, and build date to your builds. You'll also learn how to access this information within your Angular app.

1. Create a File for Version Information

Make a file named version.ts in the src/environments/ folder.

Add placeholders for the app version, build date, and commit hash, like this:

// src/environments/version.ts
export const version = "0.0.0-development";
export const buildDate = new Date().toISOString();
export const commitHash = "development";

Then, you can use this version information in your Angular code. Here's how you might do it:

import { Injectable } from "@angular/core";
import { version, buildDate, commitHash } from "src/environments/version";

@Injectable({
  providedIn: "root",
})
export class VersionService {
  getVersion(): string {
    return `Version ${version}, commit ${commitHash}, built at ${buildDate}`;
  }
}

2. Write a Script to Update Version Information

Make a file called update-version.js in your project's main folder.

This script will automatically fill in the real version and commit hash using Node.js code. Here's an example:

const fs = require("fs");
const execSync = require("child_process").execSync;

const version = require("./package.json").version;
const commitHash = execSync("git rev-parse --short HEAD").toString().trim();
const buildDate = new Date().toISOString();

const content = `export const version = '${version}';
export const buildDate = '${buildDate}';
export const commitHash = '${commitHash}';`;

fs.writeFileSync("./src/environments/version.prod.ts", content);

console.log("Updated version!", { version, commitHash, buildDate });

3. Add a Prebuild Script to Your Project

In your package.json file, add a prebuild script in the "scripts" section.

This script should run node update-version.js before each build. Your package.json should include something like this:

"scripts": {
  "prebuild": "node update-version.js"
}

4. Update Your Build Configuration

In the angular.json file, make a change to use version.prod.ts instead of version.ts when you build your app. Here's how you can set it up:

"fileReplacements": [
  {
    "replace": "src/environments/version.ts",
    "with": "src/environments/version.prod.ts"
  }
]

5. Ignore the Generated Version File

If you want, you can add version.prod.ts to your .gitignore file. This keeps the automatically generated file out of your code repository.

Working example: https://github.com/rensjaspers/add-version-to-angular-build

I hope this article was helpful to you. If you've found a better way to implement this, I'd be very interested to hear about it.