worker-html.js couldn't be loaded [Angular 6]

[aleksei-golubev]

Hi, I'm tying to use Ace in my Angular 6 application, and have an error in console:

GET http://localhost:4200/worker-html.js 404 (Not Found)
blob:http://localhost:4200/7b4eb2a2-2fe3-440c-aa09-b942beec5f0c:1 Uncaught 
(anonymous) @ blob:http://localhost:4200/7b4eb2a2-2fe3-440c-aa09-b942beec5f0c:1

in blob:http://localhost:4200/7b4eb2a2-2fe3-440c-aa09-b942beec5f0c:1, I've found:

importScripts('http://localhost:4200/worker-html.js');

It's interesting that the component looks like it's working.

Copying assets works somehow in angular-cli. I've tried to make a manual copy of this file (just for testing - angular-cli can't copy assets from node_modules directory), but it's not working properly. Maybe I'm doing something wrong.

My options in angular.json:

          "options": {
            "outputPath": "dist/app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              { "glob": "worker-html.js", "input": "src/assets/worker-html.js", "output": "./worker-html.js" }
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css",
            ],
            "scripts": [
              "node_modules/ace-builds/src-min-noconflict/ace.js",
              "node_modules/ace-builds/src-min-noconflict/theme-eclipse.js",
              "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js",
              "node_modules/ace-builds/src-min-noconflict/mode-html.js",
              "node_modules/ace-builds/src-min-noconflict/worker-html.js"
            ]
          }

In package.json:

  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "brace": "^0.11.1",
    "core-js": "^2.5.4",
    "ng2-ace-editor": "^0.3.8",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },

Component code is just the default in documentation:

import {Component, ViewChild} from '@angular/core';
 
//to use theme eclipse
//with angular-cli add "../node_modules/ace-builds/src-min/ace.js" 
//and "../node_modules/ace-builds/src-min/theme-eclipse.js" to "scripts" var into the file angular-cli.json
 
@Component({
    template: `
  <ace-editor
       [(text)]="text" // possible two way binding (thx ChrisProlls)
        #editor style="height:150px;"></ace-editor>
  `
})
export class AceCmp {
    @ViewChild('editor') editor;
    text: string = "";
 
    ngAfterViewInit() {
        this.editor.setTheme("eclipse");
 
        this.editor.getEditor().setOptions({
            enableBasicAutocompletion: true
        });
 
        this.editor.getEditor().commands.addCommand({
            name: "showOtherCompletions",
            bindKey: "Ctrl-.",
            exec: function (editor) {
 
            }
        })
    }
}

How can I get rid of this error in console?
Thanks.

[aleksei-golubev]

In example of Angular 6 application there are four warnings:

Could not load worker TypeError: e.split is not a function
    at a.t.moduleUrl (ace.js:1)
    at new f (ace.js:1)
    at Mode.createWorker (html.js:2405)
    at d.$startWorker (ace.js:1)
    at d.$onChangeMode (ace.js:1)
    at d.<anonymous> (ace.js:1)
    at a.t.loadModule (ace.js:1)
    at d.setMode (ace.js:1)
    at AceEditorComponent.push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.setMode (component.js:123)
    at AceEditorComponent.set [as mode] (component.js:112)

[hamfatfat]

In example of Angular 6 application there are four warnings:

Failed to load resource: the server responded with a status of 404 (Not Found)
blob:http://localhost:4200/b5ac2005-9cfb-4fb9-b277-e421b2ca0a5e:1 Uncaught
(anonymous) @ blob:http://localhost:4200/b5ac2005-9cfb-4fb9-b277-e421b2ca0a5e:1

[sanabenahmed]

did anyone find a solution to this errors , i'm trying to integrate ace editor in my angular 6 application and i keep getting this 4 errors @hamfatfat talked about

[ori-sh]

I managed to solve it by importing the script in angular.json with a specific bundleName.

"scripts": [
  "node_modules/ace-builds/src-min/ace.js",
  "node_modules/ace-builds/src-min/mode-json.js",
  "node_modules/ace-builds/src-min/theme-eclipse.js",
  { "bundleName": "worker-json", "input": "node_modules/ace-builds/src-min/worker-json.js" }
]

This way the bundle name of node_modules/ace-builds/src-min/worker-json.js is worker-json.js and ace manage to finaly find it correctly.

[qubiack]

I think that @ori-sh close this issue - maybe this should be added into Readme.md

[vijayliebe]

{ "bundleName": "worker-json", "input": "node_modules/ace-builds/src-min/worker-json.js" } - This does't work in production build.

[HelloClyde]

{ "bundleName": "worker-json", "input": "node_modules/ace-builds/src-min/worker-json.js" } - This does't work in production build.

try this

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

[MiladArdehali]

Just :
"assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", { "glob": "worker-json.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" } ]
is of for me!

Thanks a lot ;-)

[manuchadha1979]

I got the error as well

bb0b9cd1-0baf-40dc-8825-9fc46a708cb9:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-javascript.js' failed to load.
at blob:http://localhost:9000/bb0b9cd1-0baf-40dc-8825-9fc46a708cb9:1:1

But my issue is different. I am creating an Angular build and the build is served from my Play application. The Angular build is stored in public/ui folder in the Play application. . The worker-.js file is at path http://localhost:9000/assets/ui/worker-javascript.js but the importScript is using path http://localhost:9000/worker-javascript.js (the routes files in Play maps assets/* to public/*.

How can I change the importScript to use assets/ui... path?

[manuchadha1979]

I finally was able to make my code work. My setup is different. I build my Angular application and the it is served from my Play server. The angular build is stored in Play's /public/ui folder. The requests should be in format /assets/ui/.. which gets mapped to /public/ui/... due to a rule in Play routes file

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

When I ran the code, I got error.
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-javascript.js' failed to load.
at blob:http://localhost:9000/3df21e42-fecb-4026-8bd6-f2b0d1d0540a:1:1

Earlier, I also got error Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver

It seems ng-ace-editor imports .js scripts (theme, mode, worker) based on the theme and mode of the editor. The theme and mode js files can be included in scripts.js but some worker-.js files can't be (I don't know why, maybe because worker ones are loaded dynamically using importScript.

The scripts section in Angular.json is (this will all get bundled in scripts.js in Angular's final bundle)

"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"
]]

To include worker-.js files, I added this rule because it angular-cli can't load from node_modules. So I had to copy the files from node modules to root of my ui build - https://stackoverflow.com/questions/41555624/how-to-include-assets-from-node-modules-in-angular-cli-project

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

When I executed the code, I found error that http://localhost:9000/worker-javascript.js can't be loaded. I realised that my files are loaded in /assets/ui/ path and not in the server's root directory. So I set the basepath to /assets/ui in the component's .ts file

import * as ace from 'ace-builds/src-noconflict/ace';
ace.config.set('basePath', '/assets/ui/');
ace.config.set('modePath', '');
ace.config.set('themePath', '');

In summary
basePath seem to be what is used to load scripts dynamically (eg worker scripts)
modePath and themePath are / as the mode and theme scripts are bundled in scripts.js and are available at root level
need to copy worker-.js files outside node_modules as angular_cli can't copy assets from node_modules