未捕获的DOMException：无法在'WorkerGlobalScope'上执行'importScripts'：'http：// localhost：9000 / worker-html.js'上的脚本无法加载 [英] Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-html.js' failed to load

问题描述

我在Angular应用程序中使用Ace编辑器。它在这里定义- https://www.npmjs.com/package/ng2-ace -编辑器

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

用法：

.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）我收到以下错误：

1) I am getting the following error:

blob：http：// localhos…99f9-cccd48bdb093：1未捕获的DOMException：无法在'WorkerGlobalScope'上执行'importScripts'：位于'http：// localhost的脚本：9000 / worker-html.js'加载失败。
在blob：http：// localhost：9000 / 9446350d-625c-418b-99f9-cccd48bdb093：1：1

为什么会这样？

2）我找不到这些辅助文件的用途以及它们的来源。

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

推荐答案

我必须做两件事才能使代码正常工作

I had to do two things to make the code work

在代码中添加路径

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

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

全部 ace 文件位于 / node_modules / ace-builds / src / 中。 glob 行使它们在 outDir 的 Angular 将创建最终版本。在我的情况下，它是 ../ public / ui 的生成位置。因此，所有 ace 文件实际上都将移至 ../ public / ui / 。我使用资产的原因是因为我正在使用 Play 服务器，该服务器使用资产在路径中。因此，要获取文件，它将调用例如 localhost：9000 / assets / ui / worker-html.js 。在 play 应用程序中，我使用一条路线将所有 / assets /...请求映射到 / public /...路径

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)

这篇关于未捕获的DOMException：无法在'WorkerGlobalScope'上执行'importScripts'：'http：// localhost：9000 / worker-html.js'上的脚本无法加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！