Ace Editor + Angular 2 => Winkelmesser kann nicht synchronisieren

Question

Ich entwickle eine App mit Angular 2 (2.0.0 Release), Winkel-CLI (1.0.0-Beta.14).

Ich habe integriert Ace Editor eine Angular 2-Direktive, nach https://github.com/fxmontigny/ng2-ace-editor

Sobald der Ace-Editor instanziiert wird, kann Winkelmesser synchronisieren nicht mehr:

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

Der Ace-Editor instanziiert wird verwendet:

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

Irgendein Hinweis was ist das Problem?

Answer 1

Ok, endlich das Problem gefunden. Es sieht so aus, als ob Angular im Ace-Editor Änderungen verloren hat und daher ständig Änderungen vornimmt. So

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

nicht mehr zurück, wenn Ace Editor instanziiert wird.

Einfache Lösung: der Ace-Editor aus der Zone instanziiert:

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

Answer 2

ich das gleiche Problem konfrontiert wurde, wie oben und stattdessen das Ass Editor außerhalb von Angular laufen, ich eher mehrere Tests in Winkelmesser hergestellt, die würde von dort weitergehen, wo der vorhergehende Test aufgehört hat. Der Ace Editor würde dazu führen, dass der Browser die Synchronisation nicht beendet und somit mein Zeitmesser-Test ausläuft.

Sie könnten die Tests haben wie folgt: noch

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(); 

Leider konnte ich nicht einen alternativen Ansatz finden.