Loader silently fails when used on page in ASP.NET MVC "Areas" page.

[jhurdlow]

I can easily use Monaco on a page hosted in the standard Views folder of an ASP.NET MVC site (like http://localhost/MySite/Monaco. That works great. However when I try to do the same thing on a page under an Area in my site (like http://localhost/MySite/Admin/Monaco, the loader silently fails and leaves "monaco" undefined. The loader does not throw any errors, but when you try to create an editor monaco.editor.create(...), you get a Uncaught ReferenceError: monaco is not defined error. Watching the file loads from the browser's debugger shows that the last file loaded by the browser is editor.main.js (and it does load successfully, it's not an issue of it not being able to find the file); In a successful Monaco load (such as on the base site), that is followed by the editor.main.css and editor.main.nls.js files (then a whole bunch of other workers and services once we 'create' our editor). I have tried hosting the Monaco files both in the local site, as well as putting them on another site (CDN-style) and using the provided guidance to ensure web-worker support (both ways work on a standard view, but not one in an Area). I've tried it on Chrome, FFox, and IE; all three show the same behavior. In IE, if I load the page with the debugger open, it will sometimes stop on an error Object doesn't support property or method 'create' on editor.main.js line 47280 column 21, which maps to file:///C:/Alex/src/vscode/src/vs/editor/common/services/editorSimpleWorker.ts line 315. I don't know if that's actually related to the load failure or not. Whatever the cause, I've spend several hours trying to get this working to no avail, so I'm opening this issue.

[alexdima]

@jhurdlow I am sorry for your troubles, the one difference I immediately see is that the URL has a different path (i.e. http://localhost/MySite/Monaco vs http://localhost/MySite/Admin/Monaco), so the question from me would be how do you load the editor?

Do you "manually" create a <script> tag pointing to editor.main.js or do you let the AMD loader create the <script> path via require(['vs/editor/editor.main'], ....

What is the relevant loader config you use (i.e. require.config call you do).

It would be helpful if you could post here the relevant snippet (I'm looking for something like):

<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'javascript'
        });
    });
</script>

[jhurdlow]

Yeah, the URL is different because that's how areas work, it adds another sub-path. I'm loading editor.main.js with the require(['vs/editor/editor.main']) as per the documentation, just changing the path to the loader and in the require.config(...) call. That gets everything pointed to the right place, and editor.main.js does load, but none of the dependencies load.
After first trying to loading the Monaco files from the same site I figured I would remove any possible path issues by loading the Monaco files from another site. So I spooled up a new IIS app on my box and put just the Monaco files there (http://localhost/Monaco), then modified the script portion to match the supplied example but with my new IIS app as the target. It looks like this:

<script type="text/javascript" src="http://localhost/Monaco/dev/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'http://localhost/Monaco/dev/vs' } });
    window.MonacoEnvironment = {
        getWorkerUrl: function (workerId, label) {
            return 'scripts/monaco-editor-worker-loader-proxy.js';
        }
    };
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello Areas World!");',
                '}'
            ].join('\n'),
            language: 'javascript'
        });
    });
</script>

That works as far as loading the editor.main.js, but again, no dependencies. It fails without error, and my browser catches when we try the subsequent monaco.editor.create(...) call, saying monaco is undefined.

[jhurdlow]

I still haven't been able to get it to work with my primary project, but I did try and create a fresh site to use as a minimum example of the bug. I was able to get it to work properly with Areas in that fresh project, so I'm going to close the bug and assume it's a conflict with however my primary project is configured. I'll add more comments if I find anything further.

[jhurdlow]

The issue turns out to be a conflict between KnockoutJS and the Monaco loader. If KnockoutJS is loaded, then the loader fails. Further investigation will be required to determine why this is the case, and if changing load order would work around the problem.

[alexdima]

@jhurdlow If there is anything we can do on our side with loader.js please let me know