Warn user of unsaved changes before leaving page

I've implemented the solution from @stewdebaker which works really well, however I wanted a nice bootstrap popup instead of the clunky standard JavaScript confirm. Assuming you're already using ngx-bootstrap, you can use @stwedebaker's solution, but swap the 'Guard' for the one I'm showing here. You also need to introduce ngx-bootstrap/modal, and add a new ConfirmationComponent:

Guard

(replace 'confirm' with a function that will open a bootstrap modal - displaying a new, custom ConfirmationComponent):

import { Component, OnInit } from '@angular/core';
import { ConfirmationComponent } from './confirmation.component';

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal';

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {

  modalRef: BsModalRef;

  constructor(private modalService: BsModalService) {};

  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate() ?
      true :
      // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
      // when navigating away from your angular app, the browser will show a generic warning message
      // see http://stackoverflow.com/a/42207299/7307355
      this.openConfirmDialog();
  }

  openConfirmDialog() {
    this.modalRef = this.modalService.show(ConfirmationComponent);
    return this.modalRef.content.onClose.map(result => {
        return result;
    })
  }
}

confirmation.component.html

<div class="alert-box">
    <div class="modal-header">
        <h4 class="modal-title">Unsaved changes</h4>
    </div>
    <div class="modal-body">
        Navigate away and lose them?
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="onConfirm()">Yes</button>
        <button type="button" class="btn btn-secondary" (click)="onCancel()">No</button>        
    </div>
</div>

confirmation.component.ts

import { Component } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
    templateUrl: './confirmation.component.html'
})
export class ConfirmationComponent {

    public onClose: Subject<boolean>;

    constructor(private _bsModalRef: BsModalRef) {

    }

    public ngOnInit(): void {
        this.onClose = new Subject();
    }

    public onConfirm(): void {
        this.onClose.next(true);
        this._bsModalRef.hide();
    }

    public onCancel(): void {
        this.onClose.next(false);
        this._bsModalRef.hide();
    }
}

And since the new ConfirmationComponent will be displayed without using a selector in an html template, it needs to be declared in entryComponents (not needed anymore with Ivy) in your root app.module.ts (or whatever you name your root module). Make the following changes to app.module.ts:

app.module.ts

import { ModalModule } from 'ngx-bootstrap/modal';
import { ConfirmationComponent } from './confirmation.component';

@NgModule({
  declarations: [
     ...
     ConfirmationComponent
  ],
  imports: [
     ...
     ModalModule.forRoot()
  ],
  entryComponents: [ConfirmationComponent] // Only when using old ViewEngine

June 2020 answer:

Note that all solutions proposed up until this point do not deal with a significant known flaw with Angular's canDeactivate guards:

1. User clicks the 'back' button in the browser, dialog displays, and user clicks CANCEL.
2. User clicks the 'back' button again, dialog displays, and user clicks CONFIRM.
3. Note: user is navigated back 2 times, which could even take them out of the app altogether :(

This has been discussed here, here, and at length here

Please see my solution to the problem demonstrated here which safely works around this issue*. This has been tested on Chrome, Firefox, and Edge.

* IMPORTANT CAVEAT: At this stage, the above will clear the forward history when the back button is clicked, but preserve the back history. This solution will not be appropriate if preserving your forward history is vital. In my case, I typically use a master-detail routing strategy when it comes to forms, so maintaining forward history is not important.