fix(angular): ngOnDestroy runs inside angular zone (#24949)

Resolves #22571

Author: sean-perkins

angular/src/directives/navigation/stack-controller.ts

@@ -139,7 +139,7 @@ export class StackController {
         enteringView.ref.changeDetectorRef.reattach();
 
         return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false, animationBuilder)
-          .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location))
+          .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location, this.zone))
           .then(() => ({
             enteringView,
             direction,
@@ -201,7 +201,7 @@ export class StackController {
       this.skipTransition = true;
       this.pop(1);
     } else if (this.activeView) {
-      cleanup(this.activeView, this.views, this.views, this.location);
+      cleanup(this.activeView, this.views, this.views, this.location, this.zone);
     }
   }
 
@@ -294,20 +294,36 @@ export class StackController {
   }
 }
 
-const cleanupAsync = (activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) => {
+const cleanupAsync = (
+  activeRoute: RouteView,
+  views: RouteView[],
+  viewsSnapshot: RouteView[],
+  location: Location,
+  zone: NgZone
+) => {
   if (typeof (requestAnimationFrame as any) === 'function') {
     return new Promise<void>((resolve) => {
       requestAnimationFrame(() => {
-        cleanup(activeRoute, views, viewsSnapshot, location);
+        cleanup(activeRoute, views, viewsSnapshot, location, zone);
         resolve();
       });
     });
   }
   return Promise.resolve();
 };
 
-const cleanup = (activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) => {
-  viewsSnapshot.filter((view) => !views.includes(view)).forEach(destroyView);
+const cleanup = (
+  activeRoute: RouteView,
+  views: RouteView[],
+  viewsSnapshot: RouteView[],
+  location: Location,
+  zone: NgZone
+) => {
+  /**
+   * Re-enter the Angular zone when destroying page components. This will allow
+   * lifecycle events (`ngOnDestroy`) to be run inside the Angular zone.
+   */
+  zone.run(() => viewsSnapshot.filter((view) => !views.includes(view)).forEach(destroyView));
 
   views.forEach((view) => {
     /**

angular/test/test-app/e2e/src/nested-outlet.spec.ts

@@ -20,6 +20,12 @@ describe('Nested Outlet', () => {
     cy.ionPageVisible('app-nested-outlet-page2');
 
     cy.get('ion-router-outlet ion-router-outlet app-nested-outlet-page2 h1').should('have.text', 'Nested page 2');
+
+    cy.get('#goto-nested-page1').click();
+    cy.ionPageVisible('app-nested-outlet-page');
+
+    cy.get('#goto-nested-page2').click();
   });
+
 });
 

angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.ts

@@ -1,8 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-nested-outlet-page',
   templateUrl: './nested-outlet-page.component.html',
 })
-export class NestedOutletPageComponent {
+export class NestedOutletPageComponent implements OnDestroy, OnInit {
+
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+  }
+
+  ngOnDestroy() {
+    NgZone.assertInAngularZone();
+  }
 }

angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.html

@@ -1,6 +1,6 @@
 <ion-content>
-    <h1>Nested page 2</h1>
-    <p>
-      <ion-button routerLink="/nested-outlet/page">Go To FIRST</ion-button>
-    </p>
-  </ion-content>
+  <h1>Nested page 2</h1>
+  <p>
+    <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go To FIRST</ion-button>
+  </p>
+</ion-content>

angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.ts

@@ -1,8 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-nested-outlet-page2',
   templateUrl: './nested-outlet-page2.component.html',
 })
-export class NestedOutletPage2Component {
+export class NestedOutletPage2Component implements OnDestroy, OnInit {
+
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+  }
+
+  ngOnDestroy() {
+    NgZone.assertInAngularZone();
+  }
 }