How do you make an async request inside a CanDeactivateFn guard in Angular?

Question

Maybe a weird question but I've been having issues solving issues with this for a bit.

I have this function, which is really just an custom Alert Window that might or might not get called if a user attempts to leave a form with unsaved data.

export const unsavedDataGuard: CanDeactivateFn<boolean> = async () => {
    const utService: UTService = inject(utService);
    const alertService: AlertService = inject(AlertService);
    const unsaved = utService.unsaved;
    if (unsaved) {
        await alertService
            .openQuestion('Cancel?')
            .afterClosed()
            .subscribe(result => {
                if (result) {
                    return true;
                } else {
                    return false;
                }
            });
    } else {
        return true;
    }
};

Currently, it's giving me this error

Type '() => Promise<true | undefined>' is not assignable to type 'CanDeactivateFn<boolean>'.

And this warning

Not all code paths return a value.

I understand what the error is, and even where it gets called. If I simply return true or false after the await function, it will not give me any error anymore, but it will effectively render the function useless. The alert will still show but it will be pointless because its buttons won't do anything.

I also don't understand why this won't throw an error if I simply use the generic confirmation window from javascript.

confirm("Press a button!");

Considering it will work the same way.

Answer 1

CanDeactivateFn, accept among others Observable<boolean> or Promise as return type, so just don't subscribe and return an observable or a promise.

something link : return alertService.openQuestion('Cancel?').afterClosed()