incorrect component passed to canDeactivate guard

🐞 bug report

Affected Package

The issue is caused by package @angular/router

Description

For some reason CanDeactivate guard gets called with an incorrect component instance. In this case it should get called with a component that is mounted in a named outlet, but gets called with one from primary outlet. See example in stackblitz.

I’d expect that with configuration like below: The guard should only be called when AdminHeaderComponent is being deactivated and only with this component instance.

One notable thing is that the currentRoute param is correct!

EDIT: found a workaround:

canDeactivate(component: HasComponentPendingChanges, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot) {
    if (currentRoute.outlet === OVERLAY_OUTLET && this.router['rootContexts'] && this.router['rootContexts'].getContext) {
        const context: OutletContext = this.router['rootContexts'].getContext(OVERLAY_OUTLET);
        if (context && context.outlet && context.outlet.isActivated && context.outlet['activated'].instance) {
            component = context.outlet['activated'].instance;
        }
    }

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-named-outlet-yfgsip?file=app%2Fadmin%2Fadmin.module.ts

• Open the link
• Open the console
• Click on admin link
• Click on create user link
• Observe that following message is printed:

deactivating UsersListComponent {}

• Now click on hide navbar link

• Observe that following messages are printed:

deactivating CreateUserComponent {}
deactivating AdminHeaderComponent {}

^ all good

• Now the fun begins, click on admin and create user links again
• Click on Component 2
• Observe that following messages are printed:

deactivating UsersListComponent {}
deactivating CreateUserComponent {}
deactivating CreateUserComponent {}

I’d argue that the last message should state AdminHeaderComponent

🌍 Your Environment

Angular Version:

8.2.14

[krilllind]

I’m also experiencing the same issues, but my component param in canDeactivate returns null instead of wrong component. This happens when my named outlet is present in parent route component template.

I found this bug in version 10.0.2 but was able to reproduce in latest 11.0.1 https://stackblitz.com/edit/angular-ivy-efvmyh?file=src/app/can-deactivate-page.guard.ts

I believe my issue is related to the same as this

Expected

Console should display following messages: “canDeactivate was called” (instance of LazyComponent) “onPageDeactivation was called”

Actual behaviour

Console only outputs: “canDeactivate was called” (null)

[atscott]

Reopening - fix was reverted because it did not work with some configs.