How to integrate into Angular 13 with ngx-monaco-editor?

[faizananwerali]

How to integrate into Angular 13 with ngx-monaco-editor?

I tried all methods but none of them worked.

Any help please.

[remcohaszing]

This project doesn’t need any special framework related setup. It just works. My guess is you’re running into this issue. (I need to streamline how to handle FAQ across my several Monaco related projects.)

Based on https://github.com/atularen/ngx-monaco-editor/blob/94c1fe19061ee3a1b9d4a0587dd5c82f7c496f2e/package.json#L47 I think you may have installed a different version of monaco-editor than the one used by ngx-monaco-editor. This is an issue in their project. The correct fix would be for them to make monaco-editor a peer dependency. Also notice their monaco-editor dependency is outdated. To make it work with monaco-tailwindcss they need to update it to 0.30.0 or greater.

I suggest you try to fix some of these issues upstream in ngx-monaco-editor. The project appears to be abandoned though, so it might be time to look for an alternative or to step up as a new maintainer

[faizananwerali]

I also tried to do this with another package https://github.com/materiahq/ngx-monaco-editor as well. which has the monaco-editor dependency of 0.31.0. But it still didn't work.

I think the issue is in the Webpack compilation of workers and its usage in MonacoEnvironment. Because both libraries that I mentioned, don't use Webpack. So How do I overcome that?

I also used another package @angular-builders/custom-webpack which allows you to use custom Webpack config file in Angular, which also failed with this library.

In other words, All the library links I mentioned works on their own but not with library.

[remcohaszing]

In that case I need more info to help.

1. It’s very important to make sure every monaco-editor package is deduped. The following package should show exactly one result:

   find node_modules -name monaco-editor

   Alternatively use one of:

   npm ls monaco-editor
   yarn why monaco-editor

2. Do you have any errors? I really don’t have any information, so I can only guestimate the issue so far based on previous experience.
3. You mention you don’t use Webpack, but on the other hand you tell me you use a tool to inject a Webpack config. So you do use Webpack (indirectly)? Which Webpack version are you using. If not Webpack, then what are you using?
4. I really want to help, because I would love for this project to gain some traction. However, if you need more help, I’m going to need a reproduction repository.