未捕获的 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未捕获的 DOMException：无法在“WorkerGlobalScope”上执行“importScripts”：“http://localhost:9000/worker-html.js”处的脚本无法加载
【发布时间】：2020-03-25 20:51:57
【问题描述】：

我在我的 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) 我找不到这些工作文件的用途，以及它们从何处被包含在内。

【问题讨论】：

标签： angular ace-editor

【解决方案1】：

这是为 react-ace 准备的，我认为对于 angular 固定它可能有点相似，

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

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

【讨论】：

这个解决方案在 Reactjs 应用上与我一起工作
谢谢兄弟....帮我解决了我在下一个js中遇到的问题！

【解决方案2】：

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

在代码中，添加路径

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/。我使用assets 的原因是因为我使用Play 服务器在路径中使用assets 访问资产。所以要获取文件，它将调用例如localhost:9000/assets/ui/worker-html.js。在play 应用程序中，我使用路由将所有/assets/... 请求映射到/public/... 路径

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

【讨论】：

【解决方案3】：

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

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

【讨论】：