diff --git a/packages/router/src/operators/activate_routes.ts b/packages/router/src/operators/activate_routes.ts index 8ac8867f405..617d49fd083 100644 --- a/packages/router/src/operators/activate_routes.ts +++ b/packages/router/src/operators/activate_routes.ts @@ -126,13 +126,16 @@ export class ActivateRoutes { this.deactivateRouteAndItsChildren(children[childOutlet], contexts); } - if (context && context.outlet) { - // Destroy the component - context.outlet.deactivate(); - // Destroy the contexts for all the outlets that were in the component - context.children.onOutletDeactivated(); + if (context) { + if (context.outlet) { + // Destroy the component + context.outlet.deactivate(); + // Destroy the contexts for all the outlets that were in the component + context.children.onOutletDeactivated(); + } // Clear the information about the attached component on the context but keep the reference to - // the outlet. + // the outlet. Clear even if outlet was not yet activated to avoid activating later with old + // info context.attachRef = null; context.route = null; } diff --git a/packages/router/test/directives/router_outlet.spec.ts b/packages/router/test/directives/router_outlet.spec.ts index 1ce815ab629..af241f094ae 100644 --- a/packages/router/test/directives/router_outlet.spec.ts +++ b/packages/router/test/directives/router_outlet.spec.ts @@ -149,6 +149,47 @@ describe('router outlet name', () => { advance(fixture); expect(fixture.nativeElement.innerHTML).toMatch('.*component 3.*component 2.*component 1'); })); + + it('should not activate if route is changed', fakeAsync(() => { + @Component({ + standalone: true, + template: '