fix(elements): initialization should run in ngZone (angular#24181)

Author: remackgeek

packages/elements/src/component-factory-strategy-zone.ts

@@ -7,6 +7,7 @@
  */
 
 import {ComponentFactory, ComponentRef, Injector, NgZone} from '@angular/core';
+import {} from 'zone.js';
 
 import {ComponentNgElementStrategy, ComponentNgElementStrategyFactory} from './component-factory-strategy';
 
@@ -28,10 +29,12 @@ export class ComponentNgElementZoneStrategyFactory extends ComponentNgElementStr
  */
 export class ComponentNgElementZoneStrategy extends ComponentNgElementStrategy {
   private readonly ngZone: NgZone;
+  private elementZone: Zone;
 
   constructor(componentFactory: ComponentFactory<any>, injector: Injector) {
     super(componentFactory, injector);
     this.ngZone = this.injector.get<NgZone>(NgZone);
+    this.ngZone.run(() => { this.elementZone = Zone.current; });
   }
 
   connect(element: HTMLElement) {
@@ -50,5 +53,11 @@ export class ComponentNgElementZoneStrategy extends ComponentNgElementStrategy {
     this.runInZone(() => { super.setInputValue(propName, value); });
   }
 
-  private runInZone(fn: () => any) { return NgZone.isInAngularZone() ? fn() : this.ngZone.run(fn); }
-}
+  /**
+   * Multiple elements may have their own NgZone and NgZone.isInAngularZone() doesn't
+   * distinguish between them
+   */
+  private runInZone(fn: () => any) {
+    return (Zone.current === this.elementZone) ? fn() : this.ngZone.run(fn);
+  }
+}

packages/elements/test/component-factory-strategy_zone_spec.ts

@@ -56,8 +56,7 @@ describe('ComponentNgElementZoneStrategyFactory', () => {
 
   it('should connect already in NgZone', () => {
     const parent = spyOn(ComponentNgElementStrategy.prototype, 'connect');
-    const isInAngularZone =
-        spyOn(NgZone, 'isInAngularZone').and.callFake(function() { return true; });
+    strategy['elementZone'] = Zone.current;
     ngZone.run.calls.reset();
     strategy.connect(document.createElement('div'));
     expect(parent).toHaveBeenCalled();
@@ -66,8 +65,7 @@ describe('ComponentNgElementZoneStrategyFactory', () => {
 
   it('should connect not already in NgZone', () => {
     const parent = spyOn(ComponentNgElementStrategy.prototype, 'connect');
-    const isInAngularZone =
-        spyOn(NgZone, 'isInAngularZone').and.callFake(function() { return false; });
+    strategy['elementZone'] = Zone.current.parent;
     ngZone.run.calls.reset();
     strategy.connect(document.createElement('div'));
     expect(parent).toHaveBeenCalled();
@@ -76,8 +74,7 @@ describe('ComponentNgElementZoneStrategyFactory', () => {
 
   describe('after connected not in NgZone', () => {
     beforeEach(() => {
-      const isInAngularZone =
-          spyOn(NgZone, 'isInAngularZone').and.callFake(function() { return false; });
+      strategy['elementZone'] = Zone.current.parent;
       strategy.connect(document.createElement('div'));
       ngZone.run.calls.reset();
     });