ReferenceError:未定义monaco

时间:2017-03-06 18:10:31

标签: javascript angular typescript monaco-editor

我正在尝试使用带有角度2的微软monaco编辑器。我的组件是

declare const monaco: any;
declare const require: any;

export class MonacoEditorComponent implements AfterViewInit {
   ngAfterViewInit() {

        let onGotAmdLoader = () => {
            // Load monaco
            (<any>window).require(["vs/editor/editor.main"], () => {

                this.initMonaco();
            });
        };

        // Load AMD loader if necessary
        if (!(<any>window).require) {
            let loaderScript = document.createElement("script");
            loaderScript.type = "text/javascript";
            loaderScript.src = "vs/loader.js";
            loaderScript.addEventListener("load", onGotAmdLoader);
            document.body.appendChild(loaderScript);
        } else {
            onGotAmdLoader();
        }
    }

    initMonaco() {
        let myDiv: HTMLDivElement = this.editorContent.nativeElement;
        let options = this.options;
        options.value = this._value;
        options.language = this.language;
        this._editor = monaco.editor.create(myDiv, options);
   }
}

所以基本上,我试图通过检查window.require上的if条件来加载monaco,一旦加载了monaco的main editor.main文件我试图使用monaco.editor.create()创建一个编辑器。但即使在加载editor.main.js之后它也无法解决摩纳哥问题。我尝试调试并在initMonaco函数中看到monaco的值,它显示为不可用。我做错了吗?

注意:vs已经解析为monaco-editor / min / vs,它也可以将js文件加载到浏览器中。此外,所有使用的选项和_value变量都在组件中声明(我从这里删除它们)。

1 个答案:

答案 0 :(得分:1)

如果其他人也在寻找这个,我能够解决问题,实际上问题是摩纳哥只会加载它自己的加载器,我们在项目中使用systemjs加载器。当我们尝试使用摩纳哥装载机提供的装载机时,它运行良好。区别在于monaco loader正在为加载器添加一些额外的功能,例如config,这在systemjs loader中是不可用的。