ReferenceError: monaco is not defined

Question

I am trying to use the microsoft monaco editor with angular 2. My component is

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

So basically, I am trying to load the monaco first by checking the if condition on the window.require, once the monaco's main editor.main file is loaded I am trying to create a editor using monaco.editor.create(). But even after loading editor.main.js it is unable to resolve the monaco. I tried to debug and see the value of monaco in initMonaco function, it is showing as not available. Am I doing something wrong?

Note: vs is already resolved to the monaco-editor/min/vs already, and it is able to load the js file to browser also. Also, all variables used like options and _value are declared in the component(I removed them from here).

Answer 1

If someone else is also looking for this, I was able to solve the problem, Actually the problem is monaco will load only with it's own loader, we are using systemjs loader in our project. When we tried with the loader provided by monaco loader it worked fine. The difference is monaco loader is adding some extra functions like config to the loader, which are not available in the systemjs loader.