CODEWITHSUNDEEP
angularjsmonaco-editor
girish
girish

Reputation: 223

monaco-editor in AngularJS

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

Upvotes: 1

Views: 1154

Answers (2)

Jens
Jens

Reputation: 3412

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.

Upvotes: 0

Marc
Marc

Reputation: 63

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.

Upvotes: 0

Related Questions