WebClientで「戻る」ボタンから前のURLに戻らなくするには

現象

ブラウザアプリの欠点として「戻る」ボタンを押すと入力しているデータが飛んで「ひとつ前のURLに戻る」こととなりますが、一回の「戻る」はキャンセルできます。

対応方法

以下のファイルを置き換えてください。
※ブラウザの前提としてアプリからブラウザの「戻る」を無効化するなどの操作はできません。
src\app\app.component.ts

import { Component } from '@angular/core';
import { NgZone } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';  // ← 追加
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng';


  constructor(
    private ngZone: NgZone,
    private router: Router,        // ← 追加
  ) {
    this.ngZone.runOutsideAngular(() => {
      document.addEventListener('keydown', this.handleKeydown.bind(this), true);
    });
  }

    ngOnInit() {
      // ブラウザの戻るボタンを無効化
      history.pushState(null, '', location.href);
      this.router.events.subscribe(event => {
        if (event instanceof NavigationStart && event.navigationTrigger === 'popstate') {
          // Angular Router が popstate で動こうとしたら現在 URL に強制戻し
          this.router.navigateByUrl(this.router.url);
        }
      });
      window.addEventListener('popstate', () => {
        history.pushState(null, '', location.href);
      });
    }

  handleKeydown(event: KeyboardEvent) {
    if (event.target instanceof HTMLInputElement && /^F[1-9]|F1[0-2]$/.test(event.key)) {
      event.preventDefault();
    }
    if (/^F[1-9]|F1[0-2]$/.test(event.key)) {
      event.preventDefault();
    }
  }

  // コンポーネントが破棄されるときにリスナーを削除
  ngOnDestroy() {
    document.removeEventListener('keydown', this.handleKeydown.bind(this));
  }
}