37221

Lazy-load MonacoEditor

Question:

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?

Answer1:

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); });

Recommend

  • 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?