那些遇到过的问题

ace.js 和 Angular 的主题和模式路径推断问题

Man*_*dha 2 javascript angular

抱歉，不幸的是，这个问题没有提供太多细节，因为我不确定到底需要什么来解释这个问题。首先，我尝试ng2-ace-editor在我的Angular应用程序中使用。但我的设置并不标准。详细信息在另一个相关问题 -应用程序找不到 .js 文件

总之，如果我明确地包含ace.js在我的顶层中html，那么事情就会起作用。但我不想这样做，因为我只想使用Angular. 但是，如果我仅使用捆绑包，那么当我运行应用程序时，我会收到以下错误 -

ace.js:1 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
f @ ace.js:1
t.loadModule @ ace.js:1
setTheme @ ace.js:1
setTheme @ ace.js:1
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.setTheme @ component.js:117
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.init @ component.js:48
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.ngOnInit @ component.js:40
checkAndUpdateDirectiveInline @ core.js:9250
checkAndUpdateNodeInline @ core.js:10514
checkAndUpdateNode @ core.js:10476
debugCheckAndUpdateNode @ core.js:11109
debugCheckDirectivesFn @ core.js:11069
eval @ NewPracticeQuestionComponent.html:188
debugUpdateDirectives @ core.js:11061
checkAndUpdateView @ core.js:10458
callViewAction @ core.js:10699
execComponentViewsAction @ core.js:10641
checkAndUpdateView @ core.js:10464
callViewAction @ core.js:10699
execEmbeddedViewsAction @ core.js:10662
checkAndUpdateView @ core.js:10459
callViewAction @ core.js:10699
execComponentViewsAction @ core.js:10641
checkAndUpdateView @ core.js:10464
callViewAction @ core.js:10699
execComponentViewsAction @ core.js:10641
checkAndUpdateView @ core.js:10464
callWithDebugContext @ core.js:11351
debugCheckAndUpdateView @ core.js:11029
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges @ core.js:8845
(anonymous) @ core.js:4581
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4581
(anonymous) @ core.js:4473
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3824
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3738
next @ core.js:4473
schedulerFn @ core.js:3555
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:209
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:147
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:55
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3539
checkStable @ core.js:3793
onHasTask @ core.js:3837
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
Show 26 more frames
ace.js:1 GET http://localhost:9000/theme-monokai.js net::ERR_ABORTED 404 (Not Found)
t.loadScript @ ace.js:1
t.loadModule @ ace.js:1
setTheme @ ace.js:1
setTheme @ ace.js:1
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.setTheme @ component.js:117
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.init @ component.js:48
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.ngOnInit @ component.js:40
checkAndUpdateDirectiveInline @ core.js:9250
checkAndUpdateNodeInline @ core.js:10514
checkAndUpdateNode @ core.js:10476
debugCheckAndUpdateNode @ core.js:11109
debugCheckDirectivesFn @ core.js:11069
eval @ NewPracticeQuestionComponent.html:188
debugUpdateDirectives @ core.js:11061
checkAndUpdateView @ core.js:10458
callViewAction @ core.js:10699
execComponentViewsAction @ core.js:10641
checkAndUpdateView @ core.js:10464
callViewAction @ core.js:10699
execEmbeddedViewsAction @ core.js:10662
checkAndUpdateView @ core.js:10459
callViewAction @ core.js:10699
execComponentViewsAction @ core.js:10641
checkAndUpdateView @ core.js:10464
callViewAction @ core.js:10699
execComponentViewsAction @ core.js:10641
checkAndUpdateView @ core.js:10464
callWithDebugContext @ core.js:11351
debugCheckAndUpdateView @ core.js:11029
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges @ core.js:8845
(anonymous) @ core.js:4581
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4581
(anonymous) @ core.js:4473
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3824
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3738
next @ core.js:4473
schedulerFn @ core.js:3555
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:209
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:147
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:55
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3539
checkStable @ core.js:3793
onHasTask @ core.js:3837
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
Show 26 more frames
414ede0a-7ac6-4556-a68b-bfcd8c991283: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/414ede0a-7ac6-4556-a68b-bfcd8c991283:1:1
Run Code Online (Sandbox Code Playgroud)

进一步分析发现，该错误是由以下代码中抛出的ace.js。

exports.loadModule = function(moduleName, onLoad) {
    var module, moduleType;
    if (Array.isArray(moduleName)) {
        moduleType = moduleName[0];
        moduleName = moduleName[1];
    }

    try {
        module = require(moduleName);
    } catch (e) {}
    if (module && !exports.$loading[moduleName])
        return onLoad && onLoad(module);

    if (!exports.$loading[moduleName])
        exports.$loading[moduleName] = [];

    exports.$loading[moduleName].push(onLoad);

    if (exports.$loading[moduleName].length > 1)
        return;

    var afterLoad = function() {
        require([moduleName], function(module) {
            exports._emit("load.module", {name: moduleName, module: module});
            var listeners = exports.$loading[moduleName];
            exports.$loading[moduleName] = null;
            listeners.forEach(function(onLoad) {
                onLoad && onLoad(module);
            });
        });
    };

    if (!exports.get("packaged"))
        return afterLoad();

    net.loadScript(exports.moduleUrl(moduleName, moduleType), afterLoad);
    reportErrorIfPathIsNotConfigured();
};

var reportErrorIfPathIsNotConfigured = function() {
    if (
        !options.basePath && !options.workerPath 
        && !options.modePath && !options.themePath
        && !Object.keys(options.$moduleUrls).length
    ) {
        console.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"
        );
        reportErrorIfPathIsNotConfigured = function() {};
    }
};
Run Code Online (Sandbox Code Playgroud)

是什么导致了这个问题？我想Angular使用webpack. 这是什么ace/webpack-resolver？我该如何解决这个问题？

Man*_*dha 10

我终于能够让我的代码工作了。我的设置不同。

script明确添加标签使我的代码工作的原因是因为By default ace detcts the url for dynamic loading by finding the script node for ace.js. This doesn't work if ace.js is not loaded with a separate script tag, and in this case it is required to set url explicitely（https://ace.c9.io/#nav=howto）。当我正在加载modes并且themes没有使用时script，我不得不使用basePath等（进一步参见答案）。

我构建了我的Angular应用程序，并从我的服务器提供服务Play。构建angular版本存储在 的Play文件夹中/public/ui。请求的格式应根据播放路由文件中的规则/assets/ui/..进行映射/public/ui/...

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)
Run Code Online (Sandbox Code Playgroud)

当我运行代码时，出现错误。

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`
Run Code Online (Sandbox Code Playgroud)

似乎根据编辑器的主题和模式ng-ace-editor导入脚本（主题、模式、工作人员）。.js主题和模式.js文件可以包含在其中scripts.js，但有些worker-.js文件不能包含（我不知道为什么，可能是因为工作文件是使用动态加载的importScript）。

中的脚本部分Angular.json（这将全部捆绑在scripts.jsAngular 的最终捆绑包中）

"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"
            ]]
Run Code Online (Sandbox Code Playgroud)

为了包含worker-.js文件，我添加了此规则，因为它似乎angular-cli无法从node_modules. 所以我必须将文件从节点模块复制到我的ui构建的根目录 - 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": "/"
              }
            ],
Run Code Online (Sandbox Code Playgroud)

当我执行代码时，我发现错误http://localhost:9000/worker-javascript.js can't be loaded。我意识到我的文件是在/assets/ui/路径中加载的，而不是在服务器的根目录中。所以我在组件的文件中将ace.js's设置basepath为/assets/ui.ts

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

总之，basePath似乎是用来动态加载脚本的（例如工作脚本）。modePath并且模式和主题脚本被捆绑在一起，并且我正确加载了使用标签，并且可以在根级别使用，需要将themePathworker -.js文件复制到node_modules之外，因为angular_cli无法从node_modules复制资产/scripts.jsindex.htmlscripts.js<script>

归档时间：

查看次数：

7442 次

最近记录：

5 年，10 月 前
相关归档
如何检测元素外部的单击？ 2367
代码未在IE 11中运行,在Chrome中运行良好 149
如何在字符串中出现第n个？ 92
AJAX与JavaScript和jQuery有什么区别？ 62
如何在Angular2中监视服务调用 23
类型'标题'没有与'RequestOptionsArgs'类型相同的属性？ 19
如何使用mat-sort-header按日期字符串排序？ 14
如何处理 Angular 11 extract-i18n 覆盖现有翻译？ 8
从Angular2中的指令改变组件属性 7
在自定义错误处理程序中的Angular2中,如何使用.ts文件中的行号访问错误堆栈跟踪 7
难疑归档
使用jQuery为复选框设置"选中"？ 3988
将本地存储库分支重置为远程存储库HEAD 3488
电话和申请有什么区别？ 3012
我怎么知道通过jQuery选择了哪个单选按钮？ 2583
如何检查对象是否是数组？ 2581
查找当前目录和文件的目录 2007
如何更改一个特定提交的提交作者？ 1949
如何在Linux中一步更改文件夹及其所有子文件夹和文件的权限？ 1711
如何离开/退出/停用python virtualenv？ 1461
Vim中的remap,noremap,nnoremap和vnoremap映射命令有什么区别？ 1045