CanDeactivate confirm message : <p>I've implemented a <code>CanDeactivate</code> guard to avoid user leave the page during the upload and it works. The problem is that my message is always a default message (in dutch because of the browser language) and, even setting a message myself, still show the same default <code>confirm</code> window. I would like to write my own message (actually I have a modal that I want to show, but first I would like to see working just with my simple message)</p>

<p>Any ideas what could it be? Am I missing something?
Thanks in advance!</p>

<p>here's the code</p>

<p><strong>Guard.</strong></p>

<pre><code>    import { Injectable, ViewContainerRef } from '@angular/core';
    import { CanDeactivate } from '@angular/router';
    import { Observable } from 'rxjs/Observable';
    import { DialogService } from '../services';

    export interface PendingUpload {
        canDeactivate: () =&gt; boolean | Observable&lt;boolean&gt;;
    }
    @Injectable()
    export class PendingUploadGuard implements CanDeactivate&lt;PendingUpload&gt; {
        constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { }

        canDeactivate(component: PendingUpload): boolean | Observable&lt;boolean&gt; {

            return component.canDeactivate()
                ? true
                : confirm("Test custom message");

               //dialog I want to use later
               //this.dialogService.confirm("modal title", "modal body", this.viewContainerRef);                   
        }
    }
</code></pre>

<p><strong>Component</strong></p>

<pre><code>import { Component, OnInit, HostListener } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import { PendingUpload } from '../../shared/validators/pending-upload.guard';

import './../../rxjs-operators';

@Component({
    selector: 'component-selector',
    templateUrl: './html',
    styleUrls: ['./css']
})
export class ScannerUploadComponent implements OnInit, PendingUpload {
    uploading: boolean = false;

    constructor() { }

    ngOnInit() {
        this.uploading = false;
    }

    @HostListener('window:beforeunload')
    canDeactivate(): Observable&lt;boolean&gt; | boolean {  
        return !this.uploading;
    }
}
</code></pre>
