title: Ace text editor - "require" fails if the source is minified
body: <p>I am attempting to use the <code>ace</code> text editor with <code>angular</code>, and one of the needed behaviors requires a call to <code>ace.require</code>.</p>
  
  <p>I've included the appropriate files, but I am seeing that if I minify my javascript source, that doesn't work anymore. This is clearly because the path becomes invalid, but I'm not sure how to handle the situation except to manually load the mentioned files outside of my optimized bundles. I am using <code>ASP.NET MVC Web Optimization Framework</code> to load my javascripts as "bundles" that are compact and minified.</p>
  
  <p>I am using <strong><a href="https://github.com/angular-ui/ui-ace" rel="nofollow">ui-ace</a></strong> directive to load it, but I have tested without any directive and the behavior is the same whether or not I am going through angular.</p>
  
  <p>Has anyone else discovered a workaround to this?</p>
  
  <p>It's pretty simple code ...</p>
  
  <h1>Bundle</h1>
  
  <pre><code>bundles.Add( new ScriptBundle( "~/bundles/js/ace" )
      // include the ace text editor
      .Include( "~/application/assets/scripts/ace/ace.js" )
      .Include( "~/application/assets/scripts/ace/ext-language_tools.js" )));
  </code></pre>
  
  <h1>Javascript</h1>
  
  <pre><code>    if (angular.isDefined(opts.require)) {
          opts.require.forEach(function (n) {
              window.ace.require(n);
          });
      }
  </code></pre>
  
  <p>This can also just be typed explicitly as ...</p>
  
  <pre><code>ace.require('ace/ext/language_tools');
  </code></pre>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div ng-model="Model.Scripting"
       ui-ace="{
          useWrapMode: true,
          showGutter: true,
          theme: 'chrome',
          mode: 'javascript',
          require: ['ace/ext/language_tools'],
          advanced: {
              enableSnippets: true,
              enableBasicAutocompletion: true,
              enableLiveAutocompletion: true
          }
      }"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>HOW TO REPRODUCE</h1>
  
  <p>Since I cannot figure out a way to get the whole thing to you exactly as it needs to be, I've recreated the behavior using <code>nodejs</code>, <code>bower</code>, and <code>gulp</code>. </p>
  
  <h1>NODE JS/BOWER</h1>
  
  <p>Start by running these commands in nodejs, in a new folder.</p>
  
  <p><code>npm install bower</code>
  <code>npm install gulp</code>
  <code>npm install gulp-concat</code>
  <code>npm install gulp-rename</code>
  <code>npm install gulp-uglify</code>
  <code>npm install run-sequence</code></p>
  
  <p><code>bower install angular</code>
  <code>bower install ace-builds</code>
  <code>bower install angular-ui-ace</code></p>
  
  <h1>GULP</h1>
  
  <p>You can use this <code>gulpfile.js</code> to build the script file.</p>
  
  <pre><code>var
    gulp = require('gulp'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    sequence = require('run-sequence');
  
  gulp.task('default', function() {
    return sequence([
      "ace"
    ]);
  });
  
  gulp.task('ace', function() {
    return gulp.src([
      'bower_components/angular/angular.js',
      'bower_components/angular-ui-ace/ui-ace.js',
  
      'bower_components/ace-builds/src-noconflict/ace.js',
      'bower_components/ace-builds/src-noconflict/mode-javascript.js',
      'bower_components/ace-builds/src-noconflict/worker-javascript.js',
      'bower_components/ace-builds/src-noconflict/theme-chrome.js',
      'bower_components/ace-builds/src-noconflict/snippets/text.js',
      'bower_components/ace-builds/src-noconflict/snippets/javascript.js'])
      .pipe(concat('scripts.js'))
      .pipe(uglify())
      .pipe(gulp.dest('js'));
  });
  </code></pre>
  
  <h1>INDEX.HTML</h1>
  
  <p>This is an HTML file that can reproduce the problem.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript" src="js/scripts.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          (function () {
              var ace = window.ace = window.ace || { };
              ace.initialize = function(editor) {
                  ace.require("ace/ext/language_tools");
  
                  editor.setTheme("ace/theme/chrome");
                  editor.getSession().setMode("ace/mode/javascript");
  
                  // options
                  editor.setOptions({
                      showGutter: true,
                      showPrintMargin: false,
                      enableBasicAutocompletion: true,
                      enableSnippets: true,
                      enableLiveAutocompletion: true,
                      fontSize: '14px',
                      fontFamily: 'Consolas'
                  });
              };
          })();
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          angular.module('app', ['ui.ace'])
                  .controller('HomeController',['$scope', function($scope){
                      $scope.aceLoaded = function(_editor){
                          ace.initialize(_editor);
                      };
  
                      $scope.Model = {
                          Scripting: ""
                      }
                  }]);
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="app" ng-controller="HomeController"&gt;
      &lt;div ui-ace="{ onLoad: aceLoaded }"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>