theme and mode path infer issue with ace.js and An

问题:

Sorry, the question unfortunately hasn't got much detail as I am not sure what exactly is required to explain the issue. To start with, I am trying to use ng2-ace-editor in my Angular application. My setup is not standard though. Details are in this other related problem - application can't find a .js file

In summary, if I explicitly include ace.js in my top level html then things work. But I don't want to do that as I want to use only the bundles created by Angular. But if I use only the bundles then I get the following error when I run the application -

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

Further analysis shows that the error is thrown from the following piece of code in 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() {};
    }
};

What is causing the issue? I suppose Angular uses webpack. What is this ace/webpack-resolver thing? How do I solve the issue?

回答1:

I finally was able to make my code work. My setup is different.

The reason adding script tag explicitly made my code work is because 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). As I am loading modes and themes without using script, I had to use basePath etc. (see answer further).

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 seems angular-cli can't load from node_modules. So I had to copy the files from node modules to root of my ui build - 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 ace.js's 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 my index.html correctly loaded scripts.js using <script> tag 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