Codemirror als Angular2 Komponente

Question

hatte ich einen Codemirror-Komponente auf Basis Thread definiert: How to Access codemirror text area value in Angular2 Component?, und sieht wie folgt aus:

import {Component, OnInit, ElementRef, OnChanges, AfterViewInit} from "angular2/core"; 

@Component({ 
    selector: 'codemirror', 
    templateUrl: '<textarea id="codeMirrorEditor" style="display: none"></textarea>' 
}) 
export class CodeMirrorComponent implements OnInit,OnChanges, AfterViewInit { 

    height:number; 

    editor:CodeMirror.Editor; 

    editorNativeElement:any; 

    constructor(elRef:ElementRef) { 
     this.editorNativeElement = elRef.nativeElement; 
    } 

    ngOnInit() { 
    } 

    ngAfterViewInit() { 
     this.editor = CodeMirror(this.editorNativeElement, { 
      mode: "clike", 
      lineNumbers: true 
     }); 

     var code = "/**\r\n * This class subclasses DrawableRect and adds colors to the rectangle it draws\r\n **/\r\npublic class ColoredRect extends DrawableRect {\r\n // These are new fields defined by this class.\r\n // x1, y1, x2, and y2 are inherited from our super-superclass, Rect.\r\n @AnnotationTest\r\n protected Color border, fill;\r\n private String name;\r\n\r\n /**\r\n * This constructor uses super() to invoke the superclass constructor, and\r\n * also does some initialization of its own.\r\n **/\r\n public ColoredRect(int x1, int y1, int x2, int y2, Color border, Color fill){\r\n super(x1, y1, x2, y2);\r\n /* This\r\n is a block comment */\r\n this.border = border;\r\n this.fill = fill;\r\n this.name = \"This is a string\";\r\n }\r\n\r\n /**\r\n * This method overrides the draw() method of our superclass so that it\r\n * can make use of the colors that have been specified.\r\n **/\r\n public void draw(Graphics g) {\r\n g.setColor(fill);\r\n g.fillRect(x1, y1, x2, y2);\r\n g.setColor(border);\r\n g.drawRect(x1, y1, x2, y2);\r\n }\r\n}" 

     this.editor.setValue(code); 
     this.editor.on('change', (editor: CodeMirror.Editor) => { 
      var value = this.editor.getDoc().getValue(); 
      console.log("Value exposed:", value); 
     }); 
    } 

    ngOnChanges(changes:{}) { 
     console.log("on changes"); 
    } 

    updateHeight(height:number) { 
     this.height = height; 
    } 
} 

Gerade jetzt kann der Editor angezeigt und mit einem Stück Code initialisiert werden. Aber wenn ich auf den Editor klicke, bekomme ich einen Stacktrace wie folgt:

EXCEPTION: Error: More tasks executed then were scheduled. 
EXCEPTION: Error: More tasks executed then were scheduled. 
STACKTRACE: 
Error: More tasks executed then were scheduled. 
    at ZoneDelegate._updateTaskCount (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:398:24) 
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:369:27) 
    at Zone.runTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:48) 
    at ZoneTask.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:431:34) 
    ------------- Elapsed: 104 ms; At: Wed Apr 06 2016 23:44:53 GMT-0500 (COT) ------------- 
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1354:23) 
    at ZoneDelegate.scheduleTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:342:50) 
    at Zone.scheduleMacroTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:283:40) 
    at http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:133:26 
    at setTimeout (eval at createNamedFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:973:18), <anonymous>:3:37) 
    at Delayed.set (http://localhost:3000/node_modules/codemirror/lib/codemirror.js:8263:15) 
    at TextareaInput.copyObj.slowPoll (http://localhost:3000/node_modules/codemirror/lib/codemirror.js:1390:21) 
    at http://localhost:3000/node_modules/codemirror/lib/codemirror.js:1392:43 
    ------------- Elapsed: 101 ms; At: Wed Apr 06 2016 23:44:53 GMT-0500 (COT) ------------- 
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1354:23) 
    at ZoneDelegate.scheduleTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:342:50) 
    at Zone.scheduleMacroTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:283:40) 
    at http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:133:26 
    at setTimeout (eval at createNamedFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:973:18), <anonymous>:3:37) 
    at Delayed.set (http://localhost:3000/node_modules/codemirror/lib/codemirror.js:8263:15) 
    at TextareaInput.copyObj.slowPoll (http://localhost:3000/node_modules/codemirror/lib/codemirror.js:1390:21) 
    at http://localhost:3000/node_modules/codemirror/lib/codemirror.js:1392:43 
Uncaught Error: More tasks executed then were scheduled. 

Wie könnte ich es lösen?

---

Update: Plunker demonstration

Answer 1

Wie in den Kommentaren darauf ist es ein Bug auf Angular + Zone + Polyfills. Hier beschreibe ich eine Lösung:

throw new Error('More tasks executed then were scheduled.'); 

im

node_modules \ angular2 \ Bündel \ angular2-polyfills.js Datei, Zeile:

wir aus der Leitung kommentiert 398

Quelle + mehr Problemumgehungen: https://github.com/angular/angular/issues/7721