Add display of version and build run

.github/workflows/build.yml

@@ -22,6 +22,18 @@ jobs:
           node-version: '22'
           cache: 'npm'
 
+      - name: Version
+        run: |
+            BASE_VERSION=$(npm run get-version --silent)
+            # Remove last digit and dot, then append run number
+            VERSION=$(echo $BASE_VERSION | sed 's/\.[0-9]*$/.'${{ github.run_number }}/)
+            echo "VERSION=$VERSION" >> $GITHUB_ENV
+        shell: bash
+
+      - name: Update package.json version
+        run: npm version $VERSION --no-git-tag-version
+        shell: bash
+
       - name: Install dependencies
         run: npm ci
 

package.json

@@ -1,12 +1,13 @@
 {
   "name": "angor-profile",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "get-version": "node -p \"require('./package.json').version\""
   },
   "private": true,
   "dependencies": {

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { RouterOutlet, RouterLink } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { ThemeService } from './services/theme.service';
+import { environment } from '../environment';
 
 @Component({
   selector: 'app-root',
@@ -80,7 +81,7 @@ import { ThemeService } from './services/theme.service';
         </div>
       </div>
       <div class="footer-bottom">
-        <p>&copy; 2024 Angor Profile. All rights reserved.</p>
+        <p>&copy; 2024 Angor Profile. All rights reserved. Version {{ version }}.</p>
       </div>
     </footer>
   `,
@@ -226,6 +227,8 @@ import { ThemeService } from './services/theme.service';
 export class AppComponent {
   title = 'angor-profile';
 
+  version = environment.appVersion
+
   constructor(public themeService: ThemeService) {}
 
   toggleTheme() {

src/environment.ts

@@ -0,0 +1,5 @@
+import { version } from '../package.json';
+
+export const environment = {
+  appVersion: version,
+};

tsconfig.json

@@ -16,7 +16,8 @@
     "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022"
+    "module": "ES2022",
+    "resolveJsonModule": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,