Angular Build Information CLI

2.0.1 verified Sun Apr 19 auth: no javascript

angular-build-info is a Command Line Interface (CLI) tool designed to automate the collection of crucial build-related metadata for Angular applications. Upon execution, it generates a `build.ts` file, typically placed in the project's `src/` directory, containing details such as the application's version (from `package.json`), the current Git commit hash, the Git user, and a precise build timestamp. This generated file can then be directly imported and utilized within Angular components or services to display build information, useful for debugging, support, or informational purposes. The package is currently stable at version 2.0.1, having undergone a significant rewrite in version 2.0.0. Releases appear to follow an as-needed cadence, focusing on bug fixes and enhancements. Its primary differentiator is its simplicity and direct integration into existing Angular CLI build workflows via `package.json` scripts, providing an easily consumable TypeScript module.

Common errors

error Error: Failed to run git command: fatal: not a git repository (or any of the parent directories): .git ↓

cause `angular-build-info` was executed in a directory that is not a Git repository.

fix

Initialize your project as a Git repository using git init in your project's root directory.

error Module not found: Error: Can't resolve '../build' in '.../app.component.ts' ↓

cause The `build.ts` file was not generated or is not located at the expected path (`src/build.ts` by default) when Angular tries to compile.

fix

Ensure angular-build-info --init has been run at least once to create the file, and that angular-build-info is executed before ng build in your package.json scripts (e.g., "build": "angular-build-info && ng build"). Verify src/build.ts exists.

error Console logs show outdated build version or timestamp after a new deployment. ↓

cause The `angular-build-info` command was not executed or failed to update the `build.ts` file prior to the last `ng build`, or aggressive caching is preventing a fresh build.

fix

Double-check your package.json build scripts to ensure angular-build-info runs correctly before ng build. You might also need to clear build caches or force a clean build, e.g., by deleting dist/ and node_modules/.angular/cache/.

Warnings

breaking Version 2.0.0 introduced a "Massive v2-Rewrite" which likely includes breaking changes in CLI arguments, configuration, or the structure/content of the generated `build.ts` file. Users upgrading from v1.x should consult the project's GitHub repository for specific migration instructions. ↓

fix Review the official `angular-build-info` GitHub repository for detailed migration guides and updated usage instructions when upgrading to v2.x.

gotcha `angular-build-info` relies on Git to fetch commit hash and user information. If Git is not installed on the build environment or the project directory is not a Git repository, the CLI may fail or produce incomplete build information (e.g., missing hash/user). ↓

fix Ensure Git is installed and accessible in your system's PATH, and that your Angular project is initialized as a Git repository (`git init`).

gotcha For the `build.ts` file to contain the latest information, the `angular-build-info` command must be executed *before* `ng build` (or similar build commands) in your `package.json` scripts. Failure to do so will result in outdated or incorrect build metadata. ↓

fix Always prepend `angular-build-info &&` to your `ng build` command in `package.json` scripts. Example: `"build": "angular-build-info && ng build --prod"`.

Install

npm install angular-build-info

yarn add angular-build-info

pnpm add angular-build-info

Imports

buildInfo
wrong
```
const buildInfo = require('../build');
```
correct
```
import { buildInfo } from '../build';
```
The `buildInfo` object is a named export from the generated `build.ts` file. The path is relative to the consuming file, assuming `build.ts` is in `src/`.

Quickstart

This quickstart demonstrates how to install `angular-build-info`, initialize the `build.ts` file, configure your Angular project's `package.json` to automatically update build information, and then import and display this data within an Angular component's browser console.

npm i -g angular-build-info

# Initialize the build.ts file in your src/ folder
angular-build-info --init

# Add to package.json scripts
// package.json
{
  "scripts": {
    "build": "angular-build-info && ng build",
    "deploy": "angular-build-info && ng build --prod && ./deploy"
  }
}

// app.component.ts (example usage)
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 🏭" : "development 🚧"}\n` +
                `%c ❯ Build Version: ${buildInfo.version}\n` +
                ` ❯ Build Timestamp: ${buildInfo.timestamp}\n` +
                ` ❯ Build Message: %c${buildInfo.message || "<no message>"}\n`,
            "font-size: 14px; color: #7c7c7b;",
            "font-size: 12px; color: #7c7c7b",
            environment.production ? "font-size: 12px; color: #95c230;" : "font-size: 12px; color: #e26565;",
            "font-size: 12px; color: #7c7c7b",
            "font-size: 12px; color: #bdc6cf"
        );
    }
}