Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate monaco editor in Angular 7 + Electron #1230

Closed
Nemtecl opened this issue Dec 9, 2018 · 4 comments
Closed

Integrate monaco editor in Angular 7 + Electron #1230

Nemtecl opened this issue Dec 9, 2018 · 4 comments
Labels
feature-request Request for new features or functionality help wanted Issues identified as good community contribution opportunities integration integration-angular
Milestone

Comments

@Nemtecl
Copy link

Nemtecl commented Dec 9, 2018

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 :
image

You can find the project here

@ngohungphuc
Copy link

@jakehockey10
Copy link

Did you ever figure this one out?

@alexdima alexdima added question integration help wanted Issues identified as good community contribution opportunities integration-angular feature-request Request for new features or functionality and removed question labels Dec 6, 2019
@alexdima alexdima added this to the Backlog milestone Dec 12, 2019
@ianadavies
Copy link

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
Copy link

It seems, nothing works :(

@microsoft microsoft locked and limited conversation to collaborators Mar 10, 2023
@hediet hediet converted this issue into discussion #3785 Mar 10, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
feature-request Request for new features or functionality help wanted Issues identified as good community contribution opportunities integration integration-angular
Projects
None yet
Development

No branches or pull requests

6 participants