ng2-ace-editor: Multiple warnings: Could not load worker TypeError: e.split is not a function

Please how can I mute the multiple warning messages in the console. I assume the setMode ivocation is the direct cause of it. How should I rephrase my code so that is goes silent? Below please find my code.

console.(anonymous function)	@	console.js:26
o	@	VM41567:1
$startWorker	@	VM41567:1
$onChangeMode	@	VM41567:1
setMode	@	VM41567:1
AceEditorComponent.setMode	@	component.ts:82
AceEditorComponent.init	@	component.ts:35
AceEditorComponent	@	component.ts:28
Wrapper_AceEditorComponent	@	wrapper.ngfactory.js:7
View_ContentPageComponent0.createInternal	@	component.ngfactory.js:210
AppView.create	@	view.js:74
DebugAppView.create	@	view.js:327
View_ContentPageComponent_Host0.createInternal	@	host.ngfactory.js:16
AppView.createHostView	@	view.js:81
DebugAppView.createHostView	@	view.js:338
ComponentFactory.create	@	component_factory.js:154
ViewContainerRef_.createComponent	@	view_container_ref.js:113
RouterOutlet.activate	@	router_outlet.js:98
ActivateRoutes.placeComponentIntoOutlet	@	router.js:899
ActivateRoutes.activateRoutes	@	router.js:873
(anonymous function)	@	router.js:828
ActivateRoutes.activateChildRoutes	@	router.js:828
ActivateRoutes.activateRoutes	@	router.js:860
(anonymous function)	@	router.js:828
ActivateRoutes.activateChildRoutes	@	router.js:828
...

for brevity: snipped repetitive calls from Observable and zone

html

<ace-editor #editor
                  class="code-editor"
                  mode="html"
                  theme="clouds"
                  [text]="(buildHtml$ | async)"
                  [readOnly]="!(editorInitialized$ | async)"
                  [autoUpdateContent]="false"
                  (textChanged)="onCodeChange($event)"
      ></ace-editor>

private editorOptions: any = {
    showPrintMargin: false,
    showInvisibles: true,
    highlightGutterLine: false,
    highlightActiveLine: false,
    fadeFoldWidgets: true,
    showLineNumbers: true,
    showGutter: true,
    fontSize: 16,
    wrap: false,
  };

const editor = this.editor.getEditor();
editor.$blockScrolling = Infinity; // needed to suppress component's debug message
editor.setOptions(this.editorOptions);

About this issue

Original URL
State: open
Created 8 years ago
Comments: 15

Most upvoted comments

This is working for me:

import { Component } from '@angular/core';
import 'brace/theme/github';
import 'brace/mode/json';

@Component({
  selector: 'my-editor',
  template: '<ace-editor theme="github" mode="json"></ace-editor>'
})
export class MyEditorComponent {}

Maybe some info in the README would be useful. I didn’t even know this was using brace until @Jinnie’s comment. Thanks.

fgladisch on Mar 13, 2017

you don’t need to add

"../node_modules/ace-builds/src-min/ace.js"

to your scripts array in angular-cli.json. If it’s there take it out.

add this to the top of your ace-editor component.ts

import * as ace from 'brace';

plus

import 'brace/mode/javascript';

import 'brace/theme/monokai';

for every theme and mode you want.

Then make your export class look something like this:

export class YourComponent implements OnInit {

  public editor;

  private options: any = {
      showPrintMargin: false,
      showInvisibles: true,
      highlightGutterLine: false,
      highlightActiveLine: false,
      fadeFoldWidgets: true,
      showLineNumbers: true,
      howGutter: true,
      fontSize: 16,
      wrap: false,
      mode: 'ace/mode/javascript'
  };

  constructor() { }

  ngOnInit() {
      this.editor = ace.edit('editor');
      this.editor.getSession().setMode('ace/mode/javascript');
      this.editor.setTheme('ace/theme/monokai');
      this.editor.setOptions(this.options);
      this.editor.$blockScrolling = Infinity;
      this.editor.setValue([

          '// JavaScript',

          'var a = 3;',

          '// below line has an error which is annotated',

          'var b ='

    ].join('\n'));
    this.editor.clearSelection();
  }
}

the element should be rendered and watched by brace without any errors

NOTE:

For some reason brace won’t detect the <ace-editor #editor></ace-editor> directive as it stands in your comment. You have to change it to <div ace-editor id="editor"></div>

ALSO !

make sure you are not importing import { AceEditorModule } from 'ng2-ace-editor'; in your app.module.ts as it will overwrite brace and not allow you to set the mode or other options

wesleyyoung on Apr 24, 2018