Error: Cannot read property 'getTokens' of null

[andys8]

Issue

Uncaught TypeError: Cannot read property 'getTokens' of null
    at EditSession.getTokens (scripts.js:10056)
    at Text.$renderLine (scripts.js:16782)
    at Text.$renderLinesFragment (scripts.js:16549)
    at Text.update (scripts.js:16575)
    at VirtualRenderer.$renderChanges (scripts.js:18572)
    at RenderLoop._flush (scripts.js:17270)

Refers to this line: https://github.com/ajaxorg/ace/blob/9b5b63d1dc7c1b81b58d30c87d14b5905d030ca5/lib/ace/edit_session.js#L338

Where bgTokenizer is not defined.

The issue occurs non-deterministic and could be timing related. It occurs with karma, when executing unit tests. It occurs 0-n times in a test run. The application works and looks like it doesn't have this problem. I'm not sure, if this issue is related to ng2-ace-editor, ace, angular, karma or how I use ng2-ace-editor or somewhere in between.

Environment

<div id="editor" ace-editor [(text)]="text" (textChanged)="onChange($event)" [mode]="'solidity'" [theme]="'dawn'" [options]="options"
  [readOnly]="false" [autoUpdateContent]="false" [durationBeforeCallback]="300">
</div>

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-ace-editor',
  templateUrl: './ace-editor.component.html',
  styleUrls: ['./ace-editor.component.css']
})
export class AceEditorComponent {
  @Input()
  text = '';

  @Output()
  textChange = new EventEmitter<string>();

  options = {
    fontSize: '16px',
    maxLines: 20
  };

  onChange(text = '') {
    this.textChange.emit(text);
  }
}

Relevant dependencies

"ng2-ace-editor": "0.3.8",
"ace-mode-solidity": "0.1.0",
"karma": "~1.7.1",
"@angular/core": "^6.1.0",

angular.json contains:

"scripts": [
              "./node_modules/ace-builds/src-min/ace.js",
              "./node_modules/ace-builds/src-min/theme-dawn.js",
              "./node_modules/ace-mode-solidity/build/remix-ide/mode-solidity.js"
]

[andys8]

I removed theme, mode and options to get a small example with the issue still occuring.

<div ace-editor></div>

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-ace-editor',
  templateUrl: './ace-editor.component.html',
  styleUrls: ['./ace-editor.component.css']
})
export class AceEditorComponent {
  @Input()
  text = '';

  @Output()
  textChange = new EventEmitter<string>();
}

"scripts": [
              "./node_modules/ace-builds/src-min/ace.js"
]

Uncaught TypeError: Cannot read property 'getTokens' of null
    at EditSession.getTokens (scripts.js:10056)
    at Text.$renderLine (scripts.js:16782)
    at Text.$renderLinesFragment (scripts.js:16549)
    at Text.update (scripts.js:16575)
    at VirtualRenderer.$renderChanges (scripts.js:18572)
    at RenderLoop._flush (scripts.js:17270)

I also tried to use the component variant instead of the directive. There is no difference.

Update

My current "workaround" (not really) is to mock the component with ng2-mock-component.

[tommysitu]

Bumped into the same issue but if I rolled back to 0.3.4, it seems to be fine.

[tej-rana]

It still exists in 0.3.9

[jkristia]

I just ran into the same issue on 0.3.9