using npm run commands for building angular application (supports pre steps).

Automatically embed the application version in the UI.

webapp/frontend/git.version.ts

@@ -0,0 +1,25 @@
+import { writeFileSync } from 'fs';
+import { dedent } from 'tslint/lib/utils';
+import { promisify } from 'util';
+import * as child from 'child_process';
+const exec = promisify(child.exec);
+
+async function createVersionsFile(filename: string) {
+    const tag = (await exec('git describe --tags')).stdout.toString().trim();
+    const revision = (await exec('git rev-parse --short HEAD')).stdout.toString().trim();
+    const branch = (await exec('git rev-parse --abbrev-ref HEAD')).stdout.toString().trim();
+
+    console.log(`version: '${process.env.npm_package_version}', revision: '${revision}', branch: '${branch}'`);
+
+    const content = dedent`
+      // this file is automatically generated by git.version.ts script
+      export const versions = {
+        version: '${tag}',
+        revision: '${revision}',
+        branch: '${branch}'
+      };`;
+
+    writeFileSync(filename, content, {encoding: 'utf8'});
+}
+
+createVersionsFile('src/environments/versions.ts');

webapp/frontend/package.json

@@ -4,8 +4,10 @@
     "license": "https://themeforest.net/licenses/standard",
     "scripts": {
         "ng": "ng",
+        "prestart": "ts-node -O '{\"module\": \"commonjs\"}' git.version.ts",
         "start": "ng serve --open",
         "start:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve --open",
+        "prebuild:prod": "ts-node -O '{\"module\": \"commonjs\"}' git.version.ts",
         "build": "ng build",
         "build:prod": "ng build --prod",
         "build:prod:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",

webapp/frontend/src/app/layout/layouts/horizontal/material/material.component.html

@@ -39,7 +39,7 @@
 
                 <!-- Spacer -->
                 <div class="spacer"></div>
-
+                <code>{{appVersion}}</code>
 
                 <!-- Shortcuts -->
 <!--                <shortcuts [shortcuts]="data.shortcuts"></shortcuts>-->
@@ -48,6 +48,7 @@
 <!--                <notifications [notifications]="data.notifications"></notifications>-->
 
 
+
             </div>
 
 

webapp/frontend/src/app/layout/layouts/horizontal/material/material.component.ts

@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TreoMediaWatcherService } from '@treo/services/media-watcher';
 import { TreoNavigationService } from '@treo/components/navigation';
+import {versions} from 'environments/versions';
 
 @Component({
     selector     : 'material-layout',
@@ -13,6 +14,7 @@ import { TreoNavigationService } from '@treo/components/navigation';
 })
 export class MaterialLayoutComponent implements OnInit, OnDestroy
 {
+    appVersion: string;
     data: any;
     isScreenSmall: boolean;
 
@@ -46,6 +48,8 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
         // Set the defaults
         this.fixedHeader = false;
         this.fixedFooter = false;
+
+        this.appVersion = `${versions.version}${versions.branch === 'master' ? '' : '#' + versions.branch}`
     }
 
     // -----------------------------------------------------------------------------------------------------

webapp/frontend/src/environments/versions.ts

@@ -0,0 +1,7 @@
+
+// this file is automatically generated by git.version.ts script
+export const versions = {
+  version: 'v0.0.0',
+  revision: 'abcdef123',
+  branch: 'master'
+};