Sergio Sergio - 2 months ago 33
TypeScript Question

CodeMirror as Angular2 component

I had defined a codemirror component based on thread: How to Access codemirror text area value in Angular2 Component? , and looks like this:

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


Right now the editor can be displayed and initialized with a piece of code. However when I click on the editor I got a stacktrace like this:

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.


How could I solve it?




Update: Plunker demonstration

Answer

As pointed in the comments it is a bug on Angular + Zone + Polyfills. Here I describe a Workaround:

we commented out the line:

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

in the

node_modules\angular2\bundles\angular2-polyfills.js file, line 398

source + more workarounds: https://github.com/angular/angular/issues/7721

Comments