2016-09-19 2 views
2

각도 2 (2.0.0 릴리스), 각도 -cli (1.0.0-beta.14)를 사용하여 앱을 개발하고 있습니다.에이스 편집기 + 각도 2 => 각도기가 동기화 할 수 없습니다

나는 즉시 에이스 편집기가 인스턴스화으로 https://github.com/fxmontigny/ng2-ace-editor

을 다음 각도이 지시어를 사용하여 에이스 편집기를 통합 한, 각도기는 더 이상 동기화 할 수 없습니다 :

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

에이스 편집기를 사용하여 인스턴스화됩니다 :

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

어떤 점이 좋을까요?

+0

에이스 에디터가 인스턴스화 된 것처럼 보이지만 Angular는 더 이상 준비가되어 있지 않다는 것을 알 수 있습니다 : window.getAngularTestability ($ ('app-root')). whenStable (function() {console.log ('stable')})'더 이상 아무것도 인쇄하지 않습니다. – rcomblen

답변

1

좋아, 마침내 문제가 발견되었습니다. Angular가 Ace Editor에서 변경 내용을 추적하지 못하는 것처럼 보입니다. 따라서 계속적인 변화가 있다고 생각합니다. 따라서

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

에이스 편집기가 인스턴스화 될 때 더 이상 반환되지 않습니다.

쉬운 솔루션 : 영역에서 에이스 편집기를 인스턴스화 :

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

, 차라리 각도기 여러 테스트를했다 위 대신 각도 이외의 에이스 편집기를 실행 나는이 같은 문제에 직면 한 이전 테스트가 중단 된 지점부터 계속됩니다. 에이스 에디터는 브라우저가 동기화를 끝내지 못하게하므로 내 각도기 테스트가 시간 초과됩니다. 다음과 같이

당신은 테스트를 할 수 :

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

은 불행하게도, 난 아직 다른 방법을 찾을 수 없습니다.