Angular 17: show app version, automate releases and update changelog

25-10-2023

3 min read

github

Table of Contents

##Angular 17: show app version, automate releases and update changelog

Purpose of this article:

  1. Display your current Angular version
  2. Create changelog in order to see historical commits and changes in your project.
  3. Automate new releases and upload them to your Github repository

If you need to replicate exactly this steps I’ll recommend you:

release-it is a powerful tool that simplifies the process of creating and publishing new releases for your software projects. It automates many of the tedious tasks involved in releasing new versions, such as generating changelogs, creating release notes, and updating package registries. You can find more info here: https://github.com/release-it/release-it

Check that in your tsconfig.json file you have enabled resolveJsonModule . By default, TypeScript will not treat JSON files as modules, so you will not be able to import them directly. However, if you set resolveJsonModule to true, TypeScript will resolve JSON files as if they were regular JavaScript modules.

1//ts.config.json
2{
3  "compileOnSave": false,
4  "compilerOptions": {
5    "outDir": "./dist/out-tsc",
6    "forceConsistentCasingInFileNames": true,
7    "strict": true,
8    "noImplicitOverride": true,
9    "resolveJsonModule": true,  //<<
10    "lib": [
11      "ES2022",
12      "dom"
13    ]
14  },
15}

Now in your app.component.ts you can import directly your application’s version from package.json and display it on the template:

1//app.component.html
2<h1>{{title}}</h1>
3<span>{{version}}</span>
4<router-outlet></router-outlet>
1//app.component.ts
2import { version } from '../../package.json';
3
4export class AppComponent {
5  title = 'auto-release';
6  public version;
7  constructor() {
8    this.version = version;
9  }
10}

Install for development the release-it package.

1npm i -D release-it

Let’s create in our root folder a .release-it.json file and add the followind commands.

1//.release-it.json
2{
3  "github": {
4    "release": true
5  },
6  "git": {
7    "requireBranch": "main",
8    "commitMessage": "chore: release v${version}"
9  },
10  "hooks": {
11    "before:init": ["git pull origin main"],
12    "after:bump": "npx auto-changelog -p"
13  }
14}

Explanation step by step:

1. GitHub Integration:

  • "github": { "release": true }: This enables integration with GitHub, allowing Release-it to create and publish releases to your GitHub repository.

2. Git Configuration:

  • "git": { "requireBranch": "main" }: Specifies that the release should be performed on the main branch.
  • "commitMessage": "chore: release v${version}" }: Defines the commit message for the release commit, using the placeholder ${version} to inject the actual version number.

3. Hooks Configuration:

Hooks are optional tasks that can be executed before or after specific stages of the release process. In this case, two hooks are defined:

  • "before:init": ["git pull origin main"] : This hook runs before the initial release process begins. It executes the command git pull origin main, which ensures that the local repository is up-to-date with the remote repository before performing the release.
  • "after:bump": "npx auto-changelog -p" : This hook runs after the version has been bumped, typically after a successful release commit. It executes the command npx auto-changelog -p, which generates a changelog based on the commit history since the previous release. The -p flag indicates that the changelog should be formatted for publishing to GitHub.

With this settled you can now add a new script in your package.json

1"scripts": {
2    "ng": "ng",
3    "start": "ng serve",
4    "build": "ng build",
5    "watch": "ng build --watch --configuration development",
6    "test": "ng test",
7    "release": "release-it"  //<<<
8  },

Run npm run relase and check how magic does its work.

github

Check also that your CHANGELOG.md file has been created succesfully:

github