Integrate monaco editor in Angular 7 + Electron

[Nemtecl]

Hello, I'm using the maximegris project to use Angular and Electron. I'm trying to integrate monaco editor in my application. I do not want to use ngx-monaco-editor because it do not support electron and i want to custom my monaco editor instance. So i followed the electron amd sample but I can't make it work... Here is my code : First a monaco-loader.js file

module.exports = {
    monaco: {
        test: function() {
            console.log('Hello it works');
        },
        createEditor: function() {
            const path = require('path');
            const amdLoader = require('../node_modules/monaco-editor/min/vs/loader.js');
            const amdRequire = amdLoader.require;
            const amdDefine = amdLoader.require.define;
            function uriFromPath(_path) {
                var pathName = path.resolve(_path).replace(/\\/g, '/');
                if (pathName.length > 0 && pathName.charAt(0) !== '/') {
                    pathName = '/' + pathName;
                }
                return encodeURI('file://' + pathName);
            }

            console.log(path.join(__dirname,  '../node_modules/monaco-editor/min'));

            amdRequire.config({
                baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min'))
            });
            // workaround monaco-css not understanding the environment
            self.module = undefined;
            amdRequire(['vs/editor/editor.main'], function() {
                var editor = monaco.editor.create(document.getElementById('container'), {
                    value: [
                        'function x() {',
                        '\tconsole.log("Hello world!");',
                        '}'
                    ].join('\n'),
                    language: 'javascript'
                });
            });
        }
    }
}

Then my home.component.ts where I launch my module :

import { Component, OnInit } from '@angular/core';
import { monaco } from '../../../monaco-loader';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    monaco.createEditor();
  }
}

Here is the error :

You can find the project here

[ngohungphuc]

@Nemtecl you can view my post from here https://ngohungphuc.wordpress.com/2019/01/08/integrate-monaco-editor-with-angular/

[jakehockey10]

Did you ever figure this one out?

[ianadavies]

Any updates on this yet?

Getting Monaco to run in Electron is a nightmare! I have been down all the problems with ngx-monaco-editor and require is undefined and trying to monkey patch, then the issues with plain javascript and loader.js and the order of loading.

Now trying covalent-code-editor but still nothing working for me, see all the issues that this still has and hacks trying to get it to work! https://github.com/Teradata/covalent-code-editor-nightly/issues/39

Please make this simpler guys!!

[stephan-fischer]

It seems, nothing works :(