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

If you want to log/display not only the version number but also information from git (like the hash, tag, etc) you can consider using a custom schematic for the angular-cli that I created. Adding it to your Angular 8+ Application is as simple as executing ng add @w11k/git-info

For further Documentation and insights you can look at the documentation available at https://github.com/w11k/angular-git-info

Answer 2

There's no need to replace-in-file.

Simple Solution: Using Angular Environments

Just inside your desired environment.*.ts file (For more information about environments read angular-2-and-environment-variables) require package.json like so:

export const environment = {
    version: require('../package.json').version
};

Then inside your app import environment:

import { environment } from '../environments/environment';

And you have environment.version. If you get cannot find name 'require' error, Read this answer

More info

Note: As @VolodymyrBilyachat mentioned in comments, this will include your package.json file in the final bundle file.

Answer 3

1. Install plugin npm install replace-in-file --save-dev

2. Add to prod environment src/environments/environment.prod.ts new property

   export const environment = {
       production: true,
       version: '{BUILD_VERSION}'
   }
   

3. Add build file replace.build.js to root of your folder

   var replace = require('replace-in-file');
   var buildVersion = process.argv[2];
   const options = {
       files: 'src/environments/environment.prod.ts',
       from: /{BUILD_VERSION}/g,
       to: buildVersion,
       allowEmptyPaths: false,
   };
   
   try {
       let changedFiles = replace.sync(options);
       console.log('Build version set: ' + buildVersion);
   }
   catch (error) {
       console.error('Error occurred:', error);
   }
   

4. add scripts to package.json

   "updateBuild": "node ./replace.build.js"
   

5. Use environment.version in your app

6. Before build call npm run updateBuild -- 1.0.1

PS. You must always remember that {BUILD_VERSION} is never committed.

PS. I wrote a bit better solution in my blog

PS.3 as @julien-100000 mentioned you should not commit environment.prod.ts with updated version. Version update must happen only in build process. And should never be committed.

Answer 4

Perhaps this is a good solution for someone.. https://medium.com/@amcdnl/version-stamping-your-app-with-the-angular-cli-d563284bb94d

What he describes is how to use your git data and have the last commit hash as build number.

By adding a postinstall step in your package.json a file will be generated when running the install script.

Answer 5

I solved this by appending a comment at the end of index.html with the last commit hash. For example:

ng build --prod

git rev-parse HEAD | awk '{print "<!-- Last commit hash: "$1" -->"}' >> dist/index.html

You can then do a "View Source" in the browser, look at the bottom of the HTML, and see the deployed version of your app.

This of course assumes that you use git as the versioning system. You could easily change git rev-parse HEAD with any other command that outputs a unique version.

Answer 6

I think for your case: ng build or ng serve add in environment.ts:

export class environment {
  production: false,
  buildTimestamp: new Date()
}

Then in your component:

import { environment } from 'src/environments/environment'; // or path to your environment.ts file

...

const buildTimestamp = environment.buildTimestamp;

This is what I was looking for.