Multiple warnings: Could not load worker TypeError: e.split is not a function

[moniuch]

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>

ts

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

[mdemierre]

I experience the same problem trying to use it for JSON.

I tried adding worker-json.js in my angular-cli.json:

"scripts": [
    "../node_modules/ace-builds/src-min/ace.js",
    "../node_modules/ace-builds/src-min/mode-json.js",
    "../node_modules/ace-builds/src-min/worker-json.js"
],

I still get the following error:

Could not load worker TypeError: name.split is not a function
    at AppConfig.exports.moduleUrl (eval at module.exports (addScript.js:9), <anonymous>:3643:22)
    at new WorkerClient (eval at module.exports (addScript.js:9), <anonymous>:16772:41)
    at Mode.createWorker (html.js:2405)
    at EditSession.$startWorker (eval at module.exports (addScript.js:9), <anonymous>:9117:39)
    at EditSession.$onChangeMode (eval at module.exports (addScript.js:9), <anonymous>:9073:18)
    at EditSession.eval (eval at module.exports (addScript.js:9), <anonymous>:9054:22)
    at AppConfig.exports.loadModule (eval at module.exports (addScript.js:9), <anonymous>:3681:26)
    at EditSession.setMode (eval at module.exports (addScript.js:9), <anonymous>:9043:16)
    at AceEditorComponent.setMode (component.ts:101)
    at AceEditorComponent.init (component.ts:37)
    at new AceEditorComponent (component.ts:30)
    at new Wrapper_AceEditorComponent (wrapper.ngfactory.js:7)
    at CompiledTemplate.proxyViewClass.View_RuleViewerComponent0.createInternal (component.ngfactory.js:50)
    at CompiledTemplate.proxyViewClass.AppView.create (view.js:95)
    at CompiledTemplate.proxyViewClass.DebugAppView.create (view.js:547)

I also get a 404 for worker-json.js, meaning that ACE still tries to load it from the network. This is the problem that brace should solve, but I don't know what should be done to fix it. A workaround may be to set the worker path to assets and let it load the file, but where should I do that?

[craigt1212]

I see this issue is still open, has anyone made any headway on this issue. I am experiencing the same error.

[craigt1212]

I stepped through this issue and got to the following:

t.moduleUrl = function(e, t) { if (a.$moduleUrls[e]) return a.$moduleUrls[e]; **var n = e.split("/");// this is where the call fails. t = t || n[n.length - 2] || "";

e is however initialized to the following value: e = Object {id: "ace/mode/html_worker", src: ""no use strict";(function(window){function resolve…'t convert "+o+" to object");return Object(o)}});"}, Should this not be e.id.split("/")?

[craigt1212]

When I set the mode to "html" or "javascript" I get the issue above, however "groovy" seems to be fine and does not return the error.

[russcarver]

Still seeing the same issues with JSON today (worker-json.js and e.split is not a function).

Any update?

[mdemierre]

By the way, this breaks the validation part of the editor. It doesn't show invalid JSON errors

[Jinnie]

This project is using brace, not directly ace. Brace is something like a browserified version of ace.

After spending some time trying to provide node modules from ace-builds, I focused on Brace and following their documentation, the following imports in the component .ts file worked for me:

var ace = require('brace'); require('brace/mode/javascript'); require('brace/theme/tomorrow');

The app will probably work without the first line, but if you run tests, they will fail. Good luck!

P.S: I didn't need any lines in the scripts section of the angular-cli.json.

[fgladisch]

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.

[PendelinP]

@fgladisch Thanks a lot - this fixed my problem ;) I've also tried to use the editor with JSON.

[RobertSundling]

In order for this to work with Ahead of Time compilation (--aot in angular-cli, such as ng build --prod or ng build --aot), it is also necessary to add this line after the imports:

declare var ace: any;

Otherwise, you will get an error such as

[xxx].js:1 Uncaught ReferenceError: ace is not defined
    at Object.module.exports.id ([xxx].js:1)

in your browser, where [xxx] is the name of your theme or mode.

[stephengardner]

Officially none of this has worked for me.

My problem is not that an alternate theme (eclipse) isn't loading -- it is loading fine. But that the module also checks localhost:4200/theme-eclipse.js which it shouldn't be doing, and subsequently giving a console error.

So I did these things to try and remove this error.

I have done: "scripts": ["../node_modules/ace-builds/src-min/ace.js"], in my angular-cli.json
npm i brace --save
import 'brace/mode/css'; At the top of my component

<ace-editor
                 #editor
                 [(text)]="myModel"
                 [mode]="'css'" 
                 [theme]="'eclipse'"
                 [readOnly]="false"
                 [autoUpdateContent]="true"
                 [durationBeforeCallback]="1000"
                 style="min-height: 200px; width:100%; overflow: auto;">
            </ace-editor>

The very inclusion of that line in my angular-cli.json gives me the e.split is not a function and adding brace is not helping.

[wesleyyoung]

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

[dillonredding]

@gorbin5's solution worked for me. I'm not seeing any errors or warnings in the console. Having to do all this configuration manually seems to defeat the purpose of ng2-ace-editor though since now I can't use <ace-editor> or even use any property binding with the ace-editor directive.

[dillonredding]

@ThePainnn's solution in issue https://github.com/fxmontigny/ng2-ace-editor/issues/44#issuecomment-319783914 seems to work with ability to still use the <ace-editor> component.

I start having issues when setting the theme in the options rather than binding it to the component directly. For example,

<ace-editor theme="sqlserver" ...></ace-editor>

works fine but

<ace-editor [option]="{ theme: 'sqlserver' }" ...></ace-editor>

causes errors in the console

GET http://localhost:4200/theme-sqlserver.js 404 (Not Found)
Refused to execute script from 'http://localhost:4200/theme-sqlserver.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

[wesleyyoung]

@dillonredding a better solution might be to do what I'm doing in my comment above. Use the this.editor.setTheme function rather than putting it in options or assigning it in the view