Lazy-load MonacoEditor


I have the following code to load MonacoEditor in index.html of my AngularJS website:

<link rel="stylesheet" data-name="vs/editor/editor.main" href="/monaco-editor/min/vs/editor/editor.main.css" /> <script src="/monaco-editor/min/vs/loader.js"></script> <script src="/monaco-editor/min/vs/editor/editor.main.nls.js"></script> <script src="/monaco-editor/min/vs/editor/editor.main.js"></script> <script> require.config({ paths: { 'vs': '/monaco-editor/min/vs' }}) console.log(monaco) </script>

Running the website displays well monaco, which will be used in a further JavaScript file.

Now, I want to load MonacoEditor by ocLazyLoad:

.state('addin', { abstract: true, template: '<ui-view/>', resolve: { loadAddinCtrl: ['$ocLazyLoad', function ($ocLazyLoad) { return $ocLazyLoad.load({files: [ "/monaco-editor/min/vs/editor/editor.main.css", "/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 () { require.config({ paths: { 'vs': '/monaco-editor/min/vs' }}) console.log(monaco) }) }] } })

The above code returns ReferenceError: monaco is not defined. Does anyone know why this happens?

Actually, I don't understand well the purpose of require.config, it seems to make the code much less flexible. Does anyone have an alternative to that?


You have loaded the dependencies, yet not loaded Monaco. Try this after your require.config:

require.config({ paths: { 'vs': '/monaco-editor/min/vs' }}) require(['vs/editor/editor.main'], function onMonacoLoaded(){ console.log(monaco); });


  • error undefined reference to `FTExtrudeFont::FTExtrudeFont(char const*)' [duplicate]
  • Inline codes are not highlighted after using “knit html” function in Rstudio
  • Cannot save model when using ember render helper
  • get iframe content as string
  • Retrieve IP address of device
  • Uncaught TypeError: $(…).select2 is not a function
  • Simulate click Geckofx vb,net
  • Conversion from string “a” to type 'Boolean' is not valid
  • How to view images from protected folder with php?
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Detect when Facebook like button is clicked
  • Needing to do .toArray() to get output of mongodb .find() on key name not value
  • Display images in Django
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • JSON response opens as a file, but I can't access it with JavaScript
  • Jquery UI tool tip close icon
  • DomPDF {PAGE_NUM} not on first page
  • Javascript simulate pressing enter in input box
  • HTML download movie download link
  • Resize panoramic image to fixed size
  • script to move all files from one location to another location
  • Modifying destination and filename of gulp-svg-sprite
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Importing jscolor library in angular 2
  • Upload files with Ajax and Jquery
  • How to pass list parameters for each object using Spring MVC?
  • Circular dependency while pushing http interceptor
  • A cron job substitute?
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • Proper way to use connect-multiparty with express.js?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery
  • apache spark aggregate function using min value
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • How do I use LINQ to get all the Items that have a particular SubItem?