Ace 编辑器 + Angular 2 => 量角器无法同步答案

【问题标题】：Ace editor + Angular 2 => protractor cannot synchronizeAce 编辑器 + Angular 2 => 量角器无法同步
【发布时间】：2016-09-19 10:34:41
【问题描述】：

我正在使用 Angular 2（2.0.0 版本）、angular-cli (1.0.0-beta.14) 开发应用程序。

我使用 Angular 2 指令集成了 Ace 编辑器，遵循 https://github.com/fxmontigny/ng2-ace-editor

一旦实例化 Ace 编辑器，量角器就无法再同步：

✗ 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)

Ace 编辑器通过以下方式实例化：

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
  }
}

任何提示是什么问题？

【问题讨论】：

看起来当 Ace 编辑器被实例化时，Angular 不能再告诉它已经准备好了：window.getAngularTestability($('app-root')).whenStable(function(){console.log('stable')}) 不再打印任何东西。

标签： angular protractor ace-editor angular-cli

【解决方案1】：

好的，终于找到问题了。看起来 Angular 在 Ace 编辑器中丢失了跟踪变化，因此认为总是有持续的变化。所以

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

实例化 Ace Editor 时不再返回。

简单的解决方案：将 Ace 编辑器实例化出区域：

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

【讨论】：

【解决方案2】：

我遇到了与上面相同的问题，我没有在 Angular 之外运行 ace 编辑器，而是在量角器中进行了多次测试，这些测试将从上一个测试停止的地方继续。 Ace Editor 会导致浏览器无法完成同步，因此我的量角器测试会超时。

您可以进行如下测试：

it('Runs Tests for components with ace edit')
  browser.ignoreSynchronization = true;
  testAngularElements();

it('Runs the rest of the test in which the ace edit is not present')
  browser.ignoreSynchronization = false;
  remainingTests();

很遗憾，我还没有找到替代方法。

【讨论】：