In the past I have added a key to my package.json file called something like dateVersion (since npm is semver only). I then leverage json-loader in webpack, which will allow you to simply: import { dateVersion } from './../package.json' into the part of the application you wish to display your version.

I bet you can come up with a way to update the package file at the same moment you update the environment file.

There may be a more ng way to do this, but the above is what I have done in the past and continue to do in most of my frontends.

Step 1

(to show the version from package.json)

Add appVersion param to your enviorment.ts.

export const environment = {
    appVersion: require('../../package.json').version;
};

Import environment to your component and access appVersion and use it on your template.

import { environment } from 'src/environments/environment';

currentVersion : string = environment.appVersion;
today: Date = new Date();

In html

<div>Current version: {{today | date : 'YYYY.MM.DD'}} {{currentVersion}}</div>

If you want the date to be date when build was done then follow this: https://medium.com/@izzatnadiri/how-to-inject-and-display-an-angular-build-timestamp-and-application-environment-details-in-67a312f80656

Step 2

(to auto-increment version on build)

Lets use npm version patch to change it. We bump the version number up on npm run build.

Add to package.json scripts

"prebuild": "npm --no-git-tag-version version patch"

pacakge.json before build

{
  "name": "application-versioning",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "prebuild": "npm --no-git-tag-version version patch",
    "build": "ng build --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

Then run command

npm run build

After build notice version change

{
  "name": "application-versioning",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "prebuild": "npm --no-git-tag-version version patch",
    "build": "ng build --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
...

https://docs.npmjs.com/cli/v8/commands/npm-version

You can use git tags or releases to send as arg to compile docker, this way you will know exactly which commit was deployed:

// environment.prod.ts

export const environment = {
  release: '<VERSION>',
  production: true,
  apiHost: 'https://example.app',
};

# Dockerfile

# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
FROM node:16.14.0 as build

WORKDIR /app

ARG config
ARG version

COPY / /app
RUN sed -i "s|<VERSION>|\"${version}\"|" ./projects/app-dashboard/src/environments/environment.${config}.ts

RUN npm install
RUN npm run pre-processing
RUN npm run build:${config}