In the following scenario, we will explore how to inject the build timestamp into our application environment file. After doing that, we can access this info anywhere inside the application. Build timestamp can prove useful when we have some kind of “About application” info page.
First of all, environment.ts and environment.prod.ts should both exist in your environments folder. Their names are self-explanatory, one is used in production builds, other is used in other build types. These should also be defined in angular.json inside fileReplacements object.
Angular.json
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
Edit the environment.ts and environment.prod.ts to have timeStamp property:
Environment.ts
export const environment = {
production: false,
timeStamp: '14.01.2021 14:44'
};
Environment.prod.ts
export const environment = {
production: true,
timeStamp: '14.01.2021 14:44'
};
Next step is to create a script that will be run before production build, we named ours prebuild.js .
Prebuild.js
var replace = require("replace-in-file");
const moment = require("moment-timezone");
var timeStamp = moment(new Date())
.tz("Europe/Paris")
.format("DD.MM.YYYY HH:mm");
const optionsTimestamp = {
files: [
"src/environments/environment.ts",
"src/environments/environment.prod.ts",
],
from: /timeStamp: '(.*)'/g,
to: "timeStamp: '" + timeStamp + "'",
allowEmptyPaths: false,
};
try {
let changedFilesTimestamp = replace.sync(optionsTimestamp);
if (changedFilesTimestamp == 0) {
throw (
"Please make sure that the file '" +
optionsTimestamp.files +
"' has \"timeStamp: ''\""
);
}
console.log("Build timestamp is set to: " + timeStamp);
} catch (error) {
console.error("Error occurred:", error);
throw error;
}
This script requires replace-in-file and moment libraries, both of which are available through npm or yarn. Let us disect the code to better understand it:
var timeStamp = moment(new Date())
.tz("Europe/Paris")
.format("DD.MM.YYYY HH:mm");
Creates a timestamp with the current date and time and formats it to DD.MM.YYYY HH:mm format (typical format in Germany).
const optionsTimestamp = {
files: [
"src/environments/environment.ts",
"src/environments/environment.prod.ts",
],
from: /timeStamp: '(.*)'/g,
to: "timeStamp: '" + timeStamp + "'",
allowEmptyPaths: false,
};
optionsTimeStamp is an object required by replace-in-file library which defines which files should be searched, a regular expression which defines what do we replace (from) and the end result we want instead of the regular expression result (to).
In this case, we search in environment.ts and environment.prod.ts for text ‘timeStamp’ after which there are single quotes and replace it with our to property (which is the new build timestamp).
After that, inside the try block, we execute the search and replace, check if we changed anything and notify the user about any action we did via console.log(). Pretty easy and simple to understand.
