fix(router): remove child outlet context from parent on deactivation

When we deactivate a child route, we deactivate its outlet as well as
its children. We also need to remove this context from the parent `Map`.
If we do not, the parent will hold on to a reference to this deactivated
context and can result in reactivating an outlet that was deactivated by
the previous navigation.

Fixes #41379

goldens/public-api/router/router.d.ts

@@ -93,6 +93,7 @@ export declare class ChildrenOutletContexts {
     getContext(childName: string): OutletContext | null;
     getOrCreateContext(childName: string): OutletContext;
     onChildOutletCreated(childName: string, outlet: RouterOutletContract): void;
+    onChildOutletDeactivated(childName: string): void;
     onChildOutletDestroyed(childName: string): void;
     onOutletDeactivated(): Map<string, OutletContext>;
     onOutletReAttached(contexts: Map<string, OutletContext>): void;

packages/router/src/operators/activate_routes.ts

@@ -123,6 +123,7 @@ export class ActivateRoutes {
       context.outlet.deactivate();
       // Destroy the contexts for all the outlets that were in the component
       context.children.onOutletDeactivated();
+      parentContexts.onChildOutletDeactivated(route.value.outlet);
     }
   }
 

packages/router/src/router_outlet_context.ts

@@ -53,6 +53,13 @@ export class ChildrenOutletContexts {
     }
   }
 
+  /**
+   * Called when the corresponding child route is deactivated during navigation.
+   */
+  onChildOutletDeactivated(childName: string): void {
+    this.contexts.delete(childName);
+  }
+
   /**
    * Called when the corresponding route is deactivated during navigation.
    * Because the component get destroyed, all children outlet are destroyed.

packages/router/test/regression_integration.spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, Component, ContentChild, NgModule, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, NgModule, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
 import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {Router} from '@angular/router';
 import {RouterTestingModule} from '@angular/router/testing';
@@ -187,6 +187,46 @@ describe('Integration', () => {
          expect(fixture.nativeElement.innerHTML).toContain('isActive: true');
        }));
   });
+
+  it('should not reactivate a deactivated outlet when destroyed and recreated - #41379',
+     fakeAsync(() => {
+       @Component({template: 'simple'})
+       class SimpleComponent {
+       }
+
+       @Component({template: ` <router-outlet *ngIf="outletVisible" name="aux"></router-outlet> `})
+       class AppComponent {
+         outletVisible = true;
+       }
+
+       TestBed.configureTestingModule({
+         imports: [RouterTestingModule.withRoutes(
+             [{path: ':id', component: SimpleComponent, outlet: 'aux'}])],
+         declarations: [SimpleComponent, AppComponent],
+       });
+
+       const router = TestBed.inject(Router);
+       const fixture = createRoot(router, AppComponent);
+       const componentCdr = fixture.componentRef.injector.get<ChangeDetectorRef>(ChangeDetectorRef);
+
+       router.navigate([{outlets: {aux: ['1234']}}]);
+       advance(fixture);
+       expect(fixture.nativeElement.innerHTML).toContain('simple');
+
+       router.navigate([{outlets: {aux: null}}]);
+       advance(fixture);
+       expect(fixture.nativeElement.innerHTML).not.toContain('simple');
+
+       fixture.componentInstance.outletVisible = false;
+       componentCdr.detectChanges();
+       expect(fixture.nativeElement.innerHTML).not.toContain('simple');
+       expect(fixture.nativeElement.innerHTML).not.toContain('router-outlet');
+
+       fixture.componentInstance.outletVisible = true;
+       componentCdr.detectChanges();
+       expect(fixture.nativeElement.innerHTML).toContain('router-outlet');
+       expect(fixture.nativeElement.innerHTML).not.toContain('simple');
+     }));
 });
 
 function advance<T>(fixture: ComponentFixture<T>): void {