Theme and mode 404 when using minified/bundled js and workerPath

[andrewboni]

I'm using requirejs, as as such, all JS gets concatenated into a single file. I'm setting workerPath to the correct folder containing Ace, but theme and mode don't seem to get picked up. Even specifying paths for both have no effect.

Any thoughts on how to correctly get theme and mode working with a requirejs / concatenated / uglified / set up?

Relevant config:

    $scope.uiAceConfig =
      theme: 'chrome'
      mode: 'html'
      onLoad: $scope.aceLoaded
      workerPath: '/public/lib/ace-builds/src-min-noconflict'

Thanks!

[cvharris]

+1

[ofirrifo]

+1

[charlieargue]

+1

[cvharris]

I'd say this is a big need for apps inside compiled deployments (crazy, right?). I had to get around this by using the CDN url for the workerPath

<div ui-ace="{
      workerPath: 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2',
      useWrapMode: 'true',
      showGutter: 'true',
      mode: 'json'
    }">

[Joysond]

Is there any other way to solve this ?

[buildjosh]

This literally makes ui-ace useless for me.

[kevindessely]

+1

[wilg]

Has anyone found a usable workaround?

[Joysond]

If you place the files where its expecting the files to be present then it might work (you have to copy all the files modes/themes)

[lahdo]

1. Configure paths to point to ace-builds before concatenation:

For example:

data-ui-ace="{
       ( ... )
       workerPath: 'bower_components/ace-builds/src-min-noconflict',
       modePath: 'bower_components/ace-builds/src-min-noconflict',
       themePath: 'bower_components/ace-builds/src-min-noconflict',
       basePath: 'bower_components/ace-builds/src-min-noconflict'
}"

2. Make sure you have properly configured bower.json overrides:

For example:

  "overrides": {
    "angular-ui-ace": {
      "main": [
        "../ace-builds/src-min-noconflict/ace.js",
        "../ace-builds/src-min-noconflict/ext-language_tools.js",
        "../ace-builds/src-min-noconflict/worker-css.js",
        "../ace-builds/src-min-noconflict/mode-javascript.js",
        "../ace-builds/src-min-noconflict/theme-monokai.js",
        "../ace-builds/src-min-noconflict/mode-css.js",
        "../ace-builds/src-min-noconflict/mode-html.js",
        ]
}

3. Replace startWorker function as advised here: https://github.com/ajaxorg/ace/issues/732

CASE 1 You are using "../ace-builds/src-min-noconflict",

To fix the problem place ace.require("ace/edit_session").EditSession.prototype.$startWorker = function(){}

before the function in which you are using ui-ace

CASE 2 You are using "../ace-builds/src",

To fix the problem place
require("ace/edit_session").EditSession.prototype.$startWorker = function(){}

before the function in which you are using ui-ace

for example

(function () {
    'use strict';

    angular
        .module('app.template')
        .controller('TemplateController', TemplateController);

    TemplateController.$inject = [];

    // Quick-fix that allows to omit ACE problem with loading html and css workers
    ace.require("ace/edit_session").EditSession.prototype.$startWorker = function(){};

    // Here you will use ui-ace
    function TemplateController() {
        var vm = this;
    }
})();

[rufengch]

+1

[estwanick]

+1

[cgatesman]

I found that I needed to set the properties as @lahdo mentioned:

ui-ace="{
       ...
       workerPath: '/.../ace-builds/src-min-noconflict',
       modePath: '/.../ace-builds/src-min-noconflict',
       themePath: '/.../ace-builds/src-min-noconflict',
       basePath: '/.../ace-builds/src-min-noconflict'
}"

But the ui-ace setOptions() function needs to be modified, too. It's missing the ability to set all of these paths (I'm not sure why it isn't written more generically to do a set on all properties provided that aren't specifically handled in this function):

    var setOptions = function(acee, session, opts) {

      // sets the ace worker path, if running from concatenated
      // or minified source
      if (angular.isDefined(opts.workerPath)) {
        var config = window.ace.require('ace/config');
        config.set('workerPath', opts.workerPath);
      }
      if (angular.isDefined(opts.modePath)) {
        var config = window.ace.require('ace/config');
        config.set('modePath', opts.modePath);
      }
      if (angular.isDefined(opts.themePath)) {
        var config = window.ace.require('ace/config');
        config.set('themePath', opts.themePath);
      }
      if (angular.isDefined(opts.basePath)) {
        var config = window.ace.require('ace/config');
        config.set('basePath', opts.basePath);
      }