VersionCheck

Automatic build version check for Angular applications.

Web client keeps querying for new deploy. When new version is detected, it reloads itself.

Installation

Add library to package.json via bash:

npm install @timcontrol/version-check

Add this scripts to package.json, section scripts:

"post-build": "node ./node_modules/@timcontrol/version-check/npm-hooks/post-build.js",
"deploy": "ng build --prod --build-optimizer && npm run post-build",

Add this code to app.component.ts:

…
import { environment } from '../environments/environment';
import { VersionCheckService } from '@timcontrol/version-check';

…

export class AppComponent implements OnInit{
  versionCheckFrequency = 1000 * 60 * 30; // every 30 minutes

  constructor(
    …
    private versionCheckService: VersionCheckService
  ) { … }

  ngOnInit(): void {
    …
    if (environment.production) {
      this.versionCheckService.initVersionCheck(
        '/version.json',
        this.versionCheckFrequency,
        this.newVersionDetected
      );
    }
  }

  private newVersionDetected(hash: string): void {
    console.log('New version has been detected:', hash);
    if (confirm('New version is available, reload page?')) {
      location.reload();
    }
  }

  …
}

Use:

To deploy an application, run in bash:

npm run deploy

How it works

Service is polling version.json file (make sure the file is readable). If change is detected it fires callback.

File version.json is generated by post-build.js script.

Requirements

• Angular 8+
• HttpClientModule (as a provider)

Sources

Version checking is based on Henrik Peinar's article Automagic reload for clients after deploy with Angular 4.

This library was generated with Angular CLI version 8.1.2.