How to include git revision into angular-cli application?

Question

I need to display git revision on my angular2 application\'s about page. The project is based on angular-cli.

How can build be extended so git revision is put for exampl

Answer 1

I went with a modified version of Vilmantas Baranauskas

I moved src/index.html to src/index.base.html and added an empty inside the HEAD

Example:

Then modified git.version.ts like this:

import 'rxjs/add/observable/combineLatest';

import { readFileSync, writeFileSync } from 'fs';
import { join } from 'path';
import { Observable } from 'rxjs/Observable';

const indexBasePath = join(__dirname, 'src');

const exec = require('child_process').exec;

const revObs = new Observable(s => {
    exec('git rev-parse --short HEAD',
    function (error: Error, stdout: Buffer, stderr: Buffer) {
        if (error !== null) {
            console.log('git error: ' + error + stderr);
        }
        s.next(stdout.toString().trim());
        s.complete();
    });
});

const branchObs = new Observable(s => {
    exec('git rev-parse --abbrev-ref HEAD',
    function (error: Error, stdout: Buffer, stderr: Buffer) {
        if (error !== null) {
            console.log('git error: ' + error + stderr);
        }
        s.next(stdout.toString().trim());
        s.complete();
    });
});

Observable
    .combineLatest(revObs, branchObs)
    .subscribe(([revision, branch]) => {
        console.log(`revision: '${revision}', branch: '${branch}'`);

        const baseHTML = readFileSync(join(indexBasePath, 'index.base.html'), 'utf8');
        const html = baseHTML
          .replace('', ``);

        writeFileSync(
          join(indexBasePath, 'index.html'),
          html,
          { encoding: 'utf8' }
        );
    });

In this example I only put revision, but you can be more thorough and put branch and version inside your html HEAD section