fix(upgrade): Run digest cycle for upgraded components in a child zone

This fixes angular#6385 by running `$rootScope.$digest` in a child zone. This prevents tasks started in the digest cycle from triggering the digest again, thus preventing the infinite loop.
heathkit · Mar 15, 2017 · ba6b69a · ba6b69a
1 parent f093501
commit ba6b69a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 36 deletions.
diff --git a/packages/upgrade/src/static/upgrade_module.ts b/packages/upgrade/src/static/upgrade_module.ts
@@ -207,8 +207,22 @@ export class UpgradeModule {
                 // stabilizing
                 setTimeout(() => {
                   const $rootScope = $injector.get('$rootScope');
-                  const subscription =
-                      this.ngZone.onMicrotaskEmpty.subscribe(() => $rootScope.$digest());
+                  const subscription = this.ngZone.onMicrotaskEmpty.subscribe(() => {
+                    if (!Zone.current.get('isNgUpgradeZone')) {
+                      Zone.current
+                          .fork({
+                            name: 'ngUpgrade',
+                            properties: {'isNgUpgradeZone': true},
+                            onInvokeTask: function(
+                                delegate: ZoneDelegate, currentZone: Zone, targetZone: Zone,
+                                task: Task, applyThis: any, applyArgs: any) {
+                              $rootScope.$digest();
+                              delegate.invokeTask(targetZone, task, applyThis, applyArgs);
+                            },
+                          })
+                          .run(() => {$rootScope.$digest()})
+                    }
+                  });
                   $rootScope.$on('$destroy', () => { subscription.unsubscribe(); });
                 }, 0);
               }

diff --git a/packages/upgrade/test/static/integration/change_detection_spec.ts b/packages/upgrade/test/static/integration/change_detection_spec.ts
@@ -100,10 +100,8 @@ export function main() {
            ngOnChanges(changes: SimpleChanges) {
              if (changes['value'].isFirstChange()) return;
 
-             this.zone.onMicrotaskEmpty.subscribe(
-                 () => { expect(element.textContent).toEqual('5'); });
-
-             Promise.resolve().then(() => this.valueFromPromise = changes['value'].currentValue);
+             this.zone.onStable.next(() => { expect(element.textContent).toEqual('5'); });
+             Promise.resolve().then(() => {this.valueFromPromise = changes['value'].currentValue});
            }
          }
 
@@ -127,35 +125,36 @@ export function main() {
          });
        }));
 
-    // This test demonstrates https://github.com/angular/angular/issues/6385
-    // which was invalidly fixed by https://github.com/angular/angular/pull/6386
-    // it('should not trigger $digest from an async operation in a watcher', async(() => {
-    //      @Component({selector: 'my-app', template: ''})
-    //      class AppComponent {
-    //      }
-
-    //      @NgModule({declarations: [AppComponent], imports: [BrowserModule]})
-    //      class Ng2Module {
-    //      }
-
-    //      const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
-    //      const ng1Module = angular.module('ng1', []).directive(
-    //          'myApp', adapter.downgradeNg2Component(AppComponent));
-
-    //      const element = html('<my-app></my-app>');
-
-    //      adapter.bootstrap(element, ['ng1']).ready((ref) => {
-    //        let doTimeout = false;
-    //        let timeoutId: number;
-    //        ref.ng1RootScope.$watch(() => {
-    //          if (doTimeout && !timeoutId) {
-    //            timeoutId = window.setTimeout(function() {
-    //              timeoutId = null;
-    //            }, 10);
-    //          }
-    //        });
-    //        doTimeout = true;
-    //      });
-    //    }));
+    it('should not trigger $digest from an async operation in a watcher', async(() => {
+         @Component({selector: 'my-app', template: ''})
+         class AppComponent {
+         }
+
+         @NgModule({
+           declarations: [AppComponent],
+           entryComponents: [AppComponent],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', []).directive(
+             'myApp', downgradeComponent({component: AppComponent}));
+
+         const element = html('<my-app></my-app>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           let doTimeout = false;
+           let timeoutId: number;
+           let rootScope = upgrade.$injector.get('$rootScope');
+           rootScope.$watch(() => {
+             if (doTimeout && !timeoutId) {
+               timeoutId = window.setTimeout(function() { timeoutId = null; }, 10);
+             }
+           });
+           doTimeout = true;
+         });
+       }));
   });
 }