I am trying to use the microsoft monaco editor with angular 2. My ponent 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 ponent(I removed them from here).

I am trying to use the microsoft monaco editor with angular 2. My ponent 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 ponent(I removed them from here).

• javascript
• angular
• typescript
• monaco-editor

Share Improve this question Follow edited Mar 6, 2017 at 18:23 Sri asked Mar 6, 2017 at 18:10 SriSri 18133 silver badges1313 bronze badges 7

• Where u initiliazed it monaco? – RIYAJ KHAN Commented Mar 6, 2017 at 18:12
• monaco should be resolved by the monaco's editor.main.js file right? – Sri Commented Mar 6, 2017 at 18:14
• No.You have to provide referance for it in the context where you going to consume it – RIYAJ KHAN Commented Mar 6, 2017 at 18:31
• Can you be more specific where and how I need to initialize the monaco? For reference see github./Microsoft/monaco-editor, there is no initialization – Sri Commented Mar 6, 2017 at 20:12
• 1 did you get this snippet from here? github./Microsoft/monaco-editor/issues/… i made some minor tweaks to that and i got mine running... – Andy Danger Gagne Commented Jun 2, 2017 at 19:18

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 2

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.