ocombe / ocLazyLoad

Lazy load modules & components in AngularJS
https://oclazyload.readme.io
MIT License
2.63k stars 510 forks source link

Lazy-load MonacoEditor, which has an AMD loader #421

Open chengtie opened 6 years ago

chengtie commented 6 years ago

First, thanks for this super useful tool...

I have a website by AngularJS, which uses MonacoEditor, which seems to have an AMD loader. In my index.html, I have the following code, which displays well monaco:

<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> console.log(monaco) </script>

Now, I want to lazy-load MonacoEditor with ocLazyLoad, But the following code returns monaco is not defined:

.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 () {
                console.log(monaco)
            })
        }]
        }
})

Does anyone know how to fix it?