How to display the app version in Angular?

Displaying the application version in Angular typically involves the following steps:

1. Configure Version Information

First, configure and manage version information within your project. Typically, this can be done by defining version variables in the environment files.

For example, in the environments folder, add version information to environment.prod.ts and environment.ts files:

typescript
export const environment = {
  production: false,
  appVersion: '1.0.0'
};

2. Use Version Information

In components, import the environment file and utilize the version information defined within it. For example, in app.component.ts:

typescript
import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  version = environment.appVersion;
}

3. Display Version Information in the Template

Next, in the component's template file app.component.html, use data binding to show the version information:

html
<footer>
  <p>Version: {{ version }}</p>
</footer>

4. Automated Version Updates (Optional)

If you want to automatically update the version number during the build process, use automation tools like standard-version or semantic-release. These tools increment the version number based on commit messages and generate change logs.

For example, with standard-version, add a script to package.json:

json
{
  "scripts": {
    "release": "standard-version"
  }
}

Running npm run release will automatically increment the version number based on commit types and update both package.json and CHANGELOG.md.

Summary

By storing version information in environment variables and referencing them in components, you can easily display the version number in your Angular application. Automation tools further streamline version management, making the process more efficient. This ensures users always see the latest version, while developers can effectively track and manage software versions.