Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-html.js' failed to load

Question

I am using Ace Editor in my Angular application. It is defined here - https://www.npmjs.com/package/ng2-ace-editor

Usage:

.html

<ace-editor id="editor" class="form-control" formControlName="answer" [ngClass]="validateField('answer')" [(text)]="text"></ace-editor>

.ts

ngAfterViewInit(){

    this.editor = ace.edit('editor');
         ace.config.set('basePath', '/assets/ui/');
         ace.config.set('modePath', '/assets/ui/');
         ace.config.set('themePath', '/assets/ui/');
        ace.config.setModuleUrl('ace/mode/php_worker','/assets/ui/worker-php.js');
        ace.config.setModuleUrl('ace/mode/coffee_worker','/assets/ui/worker-coffee.js');
        ace.config.setModuleUrl('ace/mode/css_worker','/assets/ui/worker-css.js');
        ace.config.setModuleUrl('ace/mode/javascript_worker','/assets/ui/worker-javascript.js');
        ace.config
.setModuleUrl('ace/mode/html_worker','/assets/ui/worker-html.js');
        ace.config.setModuleUrl('ace/mode/json_worker','/assets/ui/worker-json.js');
        ace.config.setModuleUrl('ace/mode/lua_worker','/assets/ui/worker-lua.js');
        ace.config.setModuleUrl('ace/mode/xml_worker','/assets/ui/worker-xml.js');
        ace.config.setModuleUrl('ace/mode/xquery_worker','/assets/ui/worker-xquery.js');
        this.editor.setTheme('ace/theme/eclipse');
}

1) I am getting the following error:

blob:http://localhos…99f9-cccd48bdb093:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-html.js' failed to load. at blob:http://localhost:9000/9446350d-625c-418b-99f9-cccd48bdb093:1:1

Why is this?

2) I couldn't find the purpose of these worker files, and from where they get included.

Answer 1

This is for react-ace figured it would maybe somewhat similar for angular fixed it for me,

<AceEditor
 setOptions={{ useWorker: false }}
 ...props
/>

Basically disables the serviceWorker. Adding a webpack-resolver increases number of files and compile time. This thread helped me a lot.

Answer 2

I had to do two things to make the code work

in code, add path

ace.config.set('basePath', '/assets/ui/');
    ace.config.set('modePath', '/assets/ui/');
    ace.config.set('themePath', '/assets/ui/');
    ace.config.set('workerPath','/assets/ui/');

Add the following code in angular.json

"assets": [
              "src/assets",
              "src/favicon.ico",
              {
                "glob": "**/*",
                "input": "./node_modules/ace-builds/src/",
                "output": "/"
              }
            ],

            "scripts": [
              "./node_modules/ace-builds/src/ace.js",
              "./node_modules/ace-builds/src/theme-eclipse.js",
              "./node_modules/ace-builds/src/theme-monokai.js",
              "./node_modules/ace-builds/src/mode-html.js"
            ]

All ace files are in /node_modules/ace-builds/src/ . the glob line makes them available at the outDir of where Angular will create the final build. In my case it is ../public/ui from where I build the angular code. So all the ace files will actually go to ../public/ui/ . Reason I am using assets is because I am using Play server which accesses assets using assets in the path. So to get files, it will call for example localhost:9000/assets/ui/worker-html.js . In the play application, I use a route to map all /assets/... requests to /public/... path

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

Answer 3

You need to define the output path in angular.json file.

 "assets": [
              "src/assets",
              {
                "glob": "worker-javascript.js",
                "input": "./node_modules/ace-builds/src-min/",
                "output": "/"
              }
            ]