Monaco Editor Not Initializing In Electron With Angular 11 (Reproduction Link in Description)

[stagefright5]

Reproduced Here: https://github.com/stagefright5/strong-soap-dynamic-module-load-issue/tree/issue-monaco-load

This repo tries to create the official demo inside the electron.

In the above repo inside monaco.component.html, there is an event listener for the init event that is supposed to be emitted by the ngx-monaco-editor. That listener is never run because init is never emitted.

Please take a look at this and confirm if this is an issue.

[jmarc-roy]

Hi @stagefright5 ,

Your example is working fine. You just have a styling issue, that's why you don't see the editor: https://github.com/stagefright5/strong-soap-dynamic-module-load-issue/blob/issue-monaco-load/angular-app/src/app/home/monaco/monaco.component.html#L8 => If you set a static height here you will see the editor working as expected.

Your html/body/app-root/app-home tags when inspecting the website are not 100% height of the window, so your calc is not working as you expect here.

[stagefright5]

@GeoAstronaute , I did the changes that you suggested. My issue was not that. The actual issue is, the initListener in this file is not executed: monaco.component.ts

[jmarc-roy]

I don't know how I can help you your example works fine on my side. I putted a log the same way you did, and it's shown in the console + the custom theme is applied.

Maybe it's linked the autoIndent option that must be a boolean ?

[stagefright5]

Can you please clone the repo I have linked and run it?

To run:

1. Checkout to issue-monaco-load branch
2. cd to angular-app directory
3. run these commands

   npm install
   npm start

[jmarc-roy]

That what I did on the GIF above ^^. Except I used yarn instead of npm.

[stagefright5]

Except I used yarn instead of npm.

That is extremely weird. In my case autoIndent option throws error if I give boolean value.

My package versions:

ngx-monaco-editor: 5.0.0 monaco-editor: 0.22.3

[jmarc-roy]

Can you try with monaco-editor v0.21.3 ? (the latest library was build using this version)

[stagefright5]

No luck. Still facing the same issue.

I am facing this issue in two different machines (ubuntu and windows). Please let me know if you need any more information related to the env

[stagefright5]

Also, which electron version are you using? Mine is 11.1.0

[jmarc-roy]

The same as yours as I was using your repository example. I was able to reproduce the issue BTW, by retrying from scratch. Not sure why it worked well the first time I tried (I have the same issue now with yarn/npm).

The issue occurred in serve mode, with the particular repository you have (angular electron), you will notice that it works well when using the script: electron:local. The issue here is the path used when we are inside electron and angular is in serve mode.

I will do a new version with a better error handling, to see the loading errors in the console with the path used. In addition, we will be able to use CDN in electron (issue on path for electron that will be fix). When it's done you will be able to use the CDN when working in "serve" mode, and use your local monaco-editor when you build your application (didn't find an easy way to have the correct path to monaco when running in serve mode inside electron).

[jmarc-roy]

Issue fixed in v5.1.0.

So my advice here is to use the CDN when working in electron with serve mode.

There is also to notice that it does not work when BrowserWindow.webPreferences.contextIsolation is set to false.

[ziqiangai]

Issue fixed in v5.1.0.

So my advice here is to use the CDN when working in electron with serve mode.

There is also to notice that it does not work when BrowserWindow.webPreferences.contextIsolation is set to false.

Thank you for your reply. It took me a long time to find a way to use ngx-monaco-editor in electron. I suggest putting this situation in readme.

[nikhilnxvverma1]

Issue fixed in v5.1.0.

So my advice here is to use the CDN when working in electron with serve mode.

There is also to notice that it does not work when BrowserWindow.webPreferences.contextIsolation is set to false.

BrowserWindow.webPreferences.contextIsolation = false is important in my setup otherwise I get the window.require is not a function(not related to this repo). Fortunately for me, using version 0.18.1 of monaco in the CDN with contextIsolation set to false still works. That said, I will still prefer if you could make a fix for the higher intended version of monaco.

Thanks.