How to insert a Build Number or Timestamp at build time in AngularCLI

Question

I want to have a timestamp or build number somewhere on my Angular2 App so I can tell if a user is using an old cached version or not.

How to do this with AngularCLI

Answer 1

Add this step to your build (ie Jenkins-Job):

echo export class MyVersion {public static readonly number = '%SVN_REVISION%'} > src\my-version.ts

You can access the number like this:

import {MyVersion} from "../my-version";

export class AppComponent {
    constructor() {
        console.log("Welcome to MyApp version " + MyVersion.number);
    }
}

This solution is + lightweight, + easy to read, + robust.

Answer 2

May be a bit late for the discussion, but hopefully I can help someone else looking at the same problem.

I have written a small npm package called angular-build-info which sums up some information about the current build such as a build timestamp, the git user which built the app, a shortened commit hash and the apps version from your projects package.json file.

Implementing the package is also pretty easy, it creates a build.ts file under src/build.ts which you can then import in your Angular app and display the information anywhere.

An example of implementing it could look as follows: (app.component.ts)

import { Component } from "@angular/core";
import { buildInfo } from "../build";
import { environment } from "../environments/environment";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    constructor() {
        console.log(
            `\n%cBuild Info:\n\n%c ❯ Environment: %c${
                environment.production ? "production