延遲加載MonacoEditor

Question

我有以下代碼在AngularJS網站的index.html中加載MonacoEditor：

<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文件中使用。

現在，我想通過ocLazyLoad加載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 。 有誰知道為什么會這樣嗎？

實際上，我不太了解require.config的目的，這似乎使代碼的靈活性降低了。 有沒有人可以替代呢？

Answer 1

您已加載依賴項，但尚未加載摩納哥。 在require.config之后嘗試以下require.config ：

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