https://github.com/inexio/angular-build-info
🛠 A CLI to generate an easily importable `build.ts` file containing various details about the application build
https://github.com/inexio/angular-build-info
angular angular2 build build-tool cli
Last synced: 22 days ago
JSON representation
🛠 A CLI to generate an easily importable `build.ts` file containing various details about the application build
- Host: GitHub
- URL: https://github.com/inexio/angular-build-info
- Owner: inexio
- License: mit
- Created: 2019-11-23T17:44:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-24T16:36:22.000Z (over 2 years ago)
- Last Synced: 2025-10-19T20:42:00.714Z (5 months ago)
- Topics: angular, angular2, build, build-tool, cli
- Language: TypeScript
- Homepage: https://npmjs.com/angular-build-info
- Size: 123 KB
- Stars: 28
- Watchers: 2
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
## Description
**`angular-build-info`** is a command line interface to collect information about your current build. It compiles information such as the timestamp when the application was built, the current git user, the hash of the latest commit and the current version from inside your projects `package.json` file.
Example output of the CLI looks as follows:
```typescript
// Angular build information, automatically generated by `4dams/angular-build-info`
export const buildInfo = {
user: "Juri Adams",
hash: "1e872b5",
version: "1.1.4",
timestamp: "November 15, 2019 16:37:35",
};
```
## Installation and Usage
Installation is pretty easy:
```sh
npm i -g angular-build-info
```
Running the script with the `--init` flag (`angular-build-info --init`) then produces a `build.ts` file inside your Angular projects `src/` folder. You can then proceed to import this file inside your Angular application. An example making use of this information can be found below.
Another important thing to use this tool effectively is to update your `package.json` scripts. Below is an example of what your `build` or `deploy` script might look like.
```json
{
"scripts": {
"build": "angular-build-info && ng build",
"deploy": "angular-build-info && ng build --prod && ./deploy"
}
}
```
If you now run any of these commands, information about the current build will be saved inside the previously mentioned `build.ts` file.
## Implementing in Angular
Below is an example of what your `app.component.ts` might look like after implementing the information from inside the `build.ts` file.
```typescript
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 || ""}\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",
);
}
}
```
This is what the previous code will output in the browser console once you open the app:
## Authors
- **Juri Adams** - _Initial Work_ - [@4dams](https://github.com/4dams)
## License
This project is underlying the MIT-License. For more information, take a look at this projects [LICENSE.md](LICENSE.md) file.