Ace editor + Angular 2 => protractor cannot synchronize

Question

I'm developing an app using Angular 2 (2.0.0 release), angular-cli (1.0.0-beta.14).

I've integrated Ace editor using an Angular 2 directive, following https://github.com/fxmontigny/ng2-ace-editor

As soon as the Ace editor is instantiated, protractor cannot synchronize anymore:

✗ should display app name
  - Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md
While waiting for element with locator - Locator: By(css selector, app-root .navbar a.active)

The Ace editor is instantiated using:

import { EventEmitter, Output, ElementRef, Input, Directive } from '@angular/core';
import 'brace';
import 'brace/theme/chrome';
import 'brace/mode/html';

declare var ace: any;

@Directive({
   selector: '[aceEditor]'
})
export class AceEditorDirective {
  editor: any;

  constructor(elementRef: ElementRef) {
    let el = elementRef.nativeElement;
    this.editor = ace['edit'](el); // Comment this line and Protractor works again
  }
}

Any hint what's the issue ?

Answer 1

Ok, finally found the issue. It looks like Angular is lost tracking changes in the Ace Editor, hence thinks there are always ongoing changes. So

window.getAngularTestability($('app-root'))
    .whenStable(funct‌​ion(){
        console.log('s‌​table')
    })

Does not return anymore when Ace Editor is instantiated.

Easy solution: instantiate the Ace Editor out of the zone:

constructor(elementRef: ElementRef, zone: NgZone) {
  let el = elementRef.nativeElement;
  zone.runOutsideAngular(() => {
    this.editor = ace['edit'](el);
  });
}