延迟加载MonacoEditor [英] Lazy-load MonacoEditor

问题描述

我有以下代码在我的AngularJS网站的index.html中加载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>

运行网站会很好地显示monaco，它将在其他JavaScript文件中使用.

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

现在，我想通过ocLazyLoad加载MonacoEditor:

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

上面的代码返回ReferenceError: monaco is not defined.有人知道为什么会这样吗?

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

实际上，我不太了解require.config的目的，这似乎使代码的灵活性降低了.有人能替代吗?

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?

推荐答案

您已加载依赖项，但尚未加载摩纳哥.在require.config之后尝试以下操作:

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

这篇关于延迟加载MonacoEditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！