AngularJS 中的 monaco 编辑器

Question

I am able to implement monaco-editor in AngularJS but in case if user refresh the page monaco through an error saying that "monaco is not defined" this is because monaco is loading lazy.Is there any other way monaco can load immediately. Here is the code..

 resolve: {
            srcipts: function (lazyScript) {
               return lazyScript.register([
                      "monaco-editor/min/vs/loader.js",
                      "monaco-editor/min/vs/editor/editor.main.nls.js",
                      "monaco-editor/min/vs/editor/editor.main.js"
                       ]).then(function () {
                        // console.log(require);
                     require.config({ paths: { 'vs': 'monaco-editor/min/vs' } })
                         // console.log(monaco)
                         })
                     }
               }

this are the link to i refereed

Lazy-load MonacoEditor

https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-amd.md

https://microsoft.github.io/monaco-editor/playground.html

help me with this issue

Answer 1

This isn't exactly the answer you were looking for, but I had the same problem with monaco in Angular 1.x. I ended up implementing monaco inside of an iFrame. Makes it a bit difficult, but it loads much easier than with AMD loading.

Answer 2

I know it's far from an ideal solution, but I basically ended up doing the following in a Directive that wraps the editor.

function delayedInitialization() {
  if (typeof window.monaco === 'undefined') {
    $timeout(delayedInitialization, 200);
  } else {
    initialize();
  }
}

One could perhaps make that a bit cleaner by packaging the editor in a way that allowed to listen for an event of sorts, but for now this works for our need.