fix(router): unset attachRef when router-outlet is destroyed to avoid mounting a destroyed component (#43697)

Previously, when a router-outlet is conditionally shown with an ngIf, and a sub-route was re-attached
via a custom RouteReuseStrategy, router-outlet would try to mount a destroyed component into the view
if the router-outlet is destroyed and re-initialized.

This commit fixes it by unsetting context.attachRef when router-outlet is destroyed, so when the
router-outlet is being initialized again, it no longer sees an attachRef that it needs to mount to the
view.

Fixes #43696

PR Close #43697

Author: adrianliaw

packages/router/src/router_outlet_context.ts

@@ -50,6 +50,7 @@ export class ChildrenOutletContexts {
     const context = this.getContext(childName);
     if (context) {
       context.outlet = null;
+      context.attachRef = null;
     }
   }
 

packages/router/test/integration.spec.ts

@@ -5941,6 +5941,59 @@ describe('Integration', () => {
          advance(fixture);
          expect(fixture).toContainComponent(Tool2Component, '(e)');
        }));
+
+    it('should not remount a destroyed component', fakeAsync(() => {
+         @Component({
+           selector: 'root-cmp',
+           template: '<div *ngIf="showRouterOutlet"><router-outlet></router-outlet></div>'
+         })
+         class RootCmpWithCondOutlet {
+           public showRouterOutlet: boolean = true;
+         }
+
+         @NgModule({
+           declarations: [RootCmpWithCondOutlet],
+           imports: [
+             CommonModule,
+             RouterTestingModule.withRoutes([
+               {path: 'a', component: SimpleCmp},
+               {path: 'b', component: BlankCmp},
+             ]),
+           ],
+           providers: [{provide: RouteReuseStrategy, useClass: AttachDetachReuseStrategy}]
+         })
+         class TestModule {
+         }
+         TestBed.configureTestingModule({imports: [TestModule]});
+
+         const router: Router = TestBed.inject(Router);
+         const fixture = createRoot(router, RootCmpWithCondOutlet);
+
+         // Activate 'a'
+         router.navigate(['a']);
+         advance(fixture);
+         expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeTruthy();
+
+         // Deactivate 'a' and detach the route
+         router.navigate(['b']);
+         advance(fixture);
+         expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeNull();
+
+         // Activate 'a' again, the route should be re-attached
+         router.navigate(['a']);
+         advance(fixture);
+         expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeTruthy();
+
+         // Hide the router-outlet, SimpleCmp should be destroyed
+         fixture.componentInstance.showRouterOutlet = false;
+         advance(fixture);
+         expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeNull();
+
+         // Show the router-outlet, SimpleCmp should be re-created
+         fixture.componentInstance.showRouterOutlet = true;
+         advance(fixture);
+         expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeTruthy();
+       }));
   });
 });