Angularjs, Requirejs, Codemirror and Coffeescript mode not working

1

I am using Angularjs, Requirejs and the Coffeescript Codemirror mode.
I can see in the chrome network tab that coffeescript.js is loaded.
But I can’t get the mode set to “coffeescript” or “text/x-coffeescript”.

Any help would be greatly appreciated.

This is the require configuration:

require.config({
    packages: [{
        name: 'codemirror',
        location: './libs/codemirror/lib',   // relative to baseUrl
        main: 'codemirror'                        // relative to package location
    },{
        name: "diff_match_patch",
        location: "./libs/codemirror",
        main: "diff_match_patch"
    },{
        name: 'merge',
        location: './libs/codemirror/addon/merge',   // relative to baseUrl
        main: 'merge'                        // relative to package location
    }]
  });
require(["codemirror", "./libs/codemirror/mode/coffeescript/coffeescript",
     "./libs/codemirror/addon/hint/show-hint", "./libs/codemirror/addon/hint/html-hint",
     "./libs/codemirror/addon/mode/loadmode"], function(CodeMirror) {
    window.CodeMirror = CodeMirror;
});

This is the angular code:on a modal popup.

CodeMirror.MergeView(document.getElementById("merge"), {
    mode: "coffeescript",

});

2

You could check whether CodeMirror is being loaded twice (and the mode is attaching itself to the one you’re not using). That’s a thing that requirejs is prone to. You can probably fix this by loading all the addons and modes with a codemirror/... prefix, rather than a relative path.

3

I’m not sure what you mean by
loading all the addons and modes with a codemirror/… prefix, rather than a relative path.

Now adding "assets/libs/codemirror/addon/merge/merge"
and codemirror is loaded twice.
and angular.js:12520 TypeError: CodeMirror.MergeView is not a function

require.config({
    packages: [{
        name: 'codemirror',
        location: 'assets/libs/codemirror/lib',   // relative to baseUrl
        main: 'codemirror'                        // relative to package location
    },
    {
        name: "diff_match_patch",
        location: "assets/libs/codemirror",
        main: "diff_match_patch"
    }]
  });

require(["assets/libs/codemirror/lib/codemirror", 
         "assets/libs/codemirror/mode/coffeescript/coffeescript",
         "assets/libs/codemirror/addon/merge/merge"
         ], 
         function(CodeMirror) {
            CodeMirror().setOption('mode', 'coffeescript');
            window.CodeMirror = CodeMirror;
});
4

This the working requirejs configuration

require.config({
    packages: [{
        name: 'codemirror',
        location: 'assets/libs/codemirror',   // relative to baseUrl
        main: 'lib/codemirror'                        // relative to package location
    },{
        name: "diff_match_patch",
        location: "assets/libs/codemirror",
        main: "diff_match_patch"
    },{
        name: 'merge',
        location: 'assets/libs/codemirror',   // relative to baseUrl
        main: 'addon/merge/merge'                        // relative to package location
    }]
  });
// load the addons and modes with a codemirror/... prefix, rather than a relative path
require(["codemirror", 'merge',  "codemirror/mode/coffeescript/coffeescript"], 
    function(CodeMirror) {
        CodeMirror().setOption('mode', 'coffeescript');
        window.CodeMirror = CodeMirror;
    }
);