未捕获的 DOMException：无法在 'WorkerGlobalScope' 上执行 'importScripts'：无法加载位于 'http://localhost:9000/worker-html.js' 的脚本

Question

我在 Angular 应用程序中使用 Ace Editor。它在这里定义 - 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) 我收到以下错误：

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

这是为什么？

2) 我找不到这些工作文件的用途，也找不到它们的来源。

Answer 1

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

在代码中，添加路径

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 从我构建 angular 代码的地方。所以所有 ace 个文件实际上将转到 ../public/ui/。我使用 assets 的原因是因为我正在使用 Play 服务器，该服务器使用路径中的 assets 访问资产。所以要获取文件，它会调用例如 localhost:9000/assets/ui/worker-html.js。在 play 应用程序中，我使用路由将所有 /assets/... 请求映射到 /public/... 路径

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

Answer 2

您需要在 angular.json 文件中定义输出路径。

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

Answer 3

这是为 react-ace 设计的，我认为它可能与 angular 为我修复它有些相似，

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

基本上禁用了serviceWorker。添加 webpack-resolver 会增加文件数量和编译时间。这thread对我帮助很大。