Monaco Editor Integration in Angular 4 + Electron

[fdeitelhoff]

monaco-editor version: 0.8.3 Browser: Electron (Chromium) OS: Windows 10

I'm trying to integrate the monaco editor in my Angular 4 app inside Electron. Angular 4 and Electron are working fine right now but I have problems getting monaco working.

Has someone ever solved this? I love monaco but those integration problems drives me crazy. Currently I'm working with this code:

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

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

@Component({
  selector: 'app-monaco-editor',
  templateUrl: './app/monaco-editor.component.html'
  //styleUrls: ['./monaco-editor.component.css']
})
export class MonacoEditorComponent implements OnInit, AfterViewInit {

    @ViewChild('editor') editorContent: ElementRef;

  constructor() {
      console.log("bla");
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    var onGotAmdLoader = () => {
      // Load monaco
        (<any>global).require.config({ paths: { 'vs': 'assets/monaco/vs' } });
        (<any>global).require(['vs/editor/editor.main'], () => {
        this.initMonaco();
      });
    };

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

  // Will be called once monaco library is available
  initMonaco() {
    var myDiv: HTMLDivElement = this.editorContent.nativeElement;
    var editor = monaco.editor.create(myDiv, {
      value: [
        'function x() {',
        '\tconsole.log("Hello world!");',
        '}'
      ].join('\n'),
      language: 'javascript'
    });
  }
}

The global variable cannot be found. Originally it was called window. I think the problem is that there's no global variable within the Angular component but I'm not quite sure.

Maybe someone has a solution to this.

[portah]

I'm playing with this component https://github.com/Teradata/covalent-code-editor to use in a browser, but they have a lot of code for Electron

[nagug]

resurrecting this old thread. Has anybody successfully done the integration with angular and electron?

There seems to be no clean of way of doing it. Any body, who has succeeded, please provide directions

[alexdima]

Have you tried loading the ESM distribution with webpack or another loader that can load ESM?

I think you can also load the loader in a way where it doesn't define global symbols e.g.

const loader = require('./vs/loader');
loader.config(...);
loader(['vs/editor/editor.main'], function () { ... });

[hediet]

Closing due to inactivity.