Ленивый-загрузчик MonacoEditor - PullRequest
Новая
       25

Ленивый-загрузчик MonacoEditor

0 голосов
/ 25 апреля 2018

У меня есть следующий код для загрузки MonacoEditor в index.html моего веб-сайта AngularJS: 

<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.

Теперь я хочу загрузить MonacoEditor по 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, кажется, что код делает гораздо менее гибким. У кого-нибудь есть альтернатива этому?

1 Ответ

0 голосов
/ 27 апреля 2018

Вы загрузили зависимости, но не загрузили Монако. Попробуйте это после вашего require.config: 

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