Angular 14

[JoeMellon]

Guess this package is no longer maintained - I'll probably fork it and migrate it to Angular 14 soon, in the meantime as it still works in 14 other than the dep issue on npm install you can override it with this in the package.json.

"overrides": { "ngx-monaco-editor": { "@angular/common": "$@angular/common", "@angular/core": "$@angular/core" } }

[pponzano]

can you please let me know the url of the forked version?Thanks

[miki995]

@here I've a new fork with latest angular 14, ngZone upgrade and fixed production missing assets, have a look, works for my company now:

https://www.npmjs.com/package/ngx-monaco-editor-v2

[Infern1]

Thanks this seems to work mostly,

Alternative question, maybe you know... Why is formcontrol missing for ngx-monaco-diff-editor ?

As I found here this is needed: https://github.com/angular/angular/issues/43821 Specially for ngx-monaco-editor it is done

[Bykiev]

@miki995, hi! I've tried to use your fork and getting this error, what can be wrong? For some reason it called 2 time and second time this.themeData doesn't contain colors

Uncaught TypeError: Cannot read properties of undefined (reading 'editor.foreground')
    at get tokenTheme [as tokenTheme] (standaloneThemeService.ts:132:44)
    at S._updateThemeOrColorMap (standaloneThemeService.ts:366:58)
    at S._updateActualTheme (standaloneThemeService.ts:336:8)
    at S.setTheme (standaloneThemeService.ts:322:8)
    at new T (standaloneCodeEditor.ts:426:17)
    at g._createInstance (instantiationService.ts:110:13)
    at g.createInstance (instantiationService.ts:76:18)
    at Object.S [as create] (standaloneEditor.ts:40:30)
    at ngx-monaco-editor-v2.mjs:157:46
    at _ZoneDelegate.invoke (zone.js:372:26)

Upd: colors was missing in my custom theme

[miki995]

Thanks this seems to work mostly,

Alternative question, maybe you know... Why is formcontrol missing for ngx-monaco-diff-editor ?

As I found here this is needed: angular/angular#43821 Specially for ngx-monaco-editor it is done

Will check in couple of days, I'm busy these days, sorry...

[Bykiev]

Thanks this seems to work mostly, Alternative question, maybe you know... Why is formcontrol missing for ngx-monaco-diff-editor ? As I found here this is needed: angular/angular#43821 Specially for ngx-monaco-editor it is done

Will check in couple of days, I'm busy these days, sorry...

Hi, sorry, the problem is solved. It was due to missing colors property. Thank you!

[rjf26]

@miki995 Ive copied the string into my angular.json for 14 { "glob": "**/*", "input": "../node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" } but getting the 404

http://localhost:4200/assets/monaco/min/vs/loader.js net::ERR_ABORTED 404 (Not Found)

[miki995]

@rjf26 You have to add monaco-editor to your package.json, as now it is not shipped with ngx-monaco-editor anymore

[ComeAlongErica]

@miki995 Ive copied the string into my angular.json for 14 { "glob": "**/*", "input": "../node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" } but getting the 404

http://localhost:4200/assets/monaco/min/vs/loader.js net::ERR_ABORTED 404 (Not Found)

I had to add the loader in my assets from monaco-editor:

{
  "glob": "**/*",
  "input": "node_modules/monaco-editor/min",
  "output": "./assets/monaco/min"
}

[allout58]

@miki995 could you link to your github repo and update the repository/homepage links for your fork on NPM?

[miki995]

@allout58 Hello, I thought links were fixed, but I believe I only fixed them on github page, will update now

[nhack]

@here I've a new fork with latest angular 14, ngZone upgrade and fixed production missing assets, have a look, works for my company now:

https://www.npmjs.com/package/ngx-monaco-editor-v2

I have tried your version of ngx-monaco-editor but I get errors regarding css imports (Angular 14.1.0, ngx-monaco-editor-v2 14.0.4 and monaco-editor 0.34.1). Any idea what might be wrong?:

./node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-action-bar { | white-space: nowrap;

[miki995]

@nhack Hello, can you provide simple example or not? Did you follow all instructions in new fork? Best

[nhack]

@miki995 I figured out what was wrong. I had the following import in my code: import {MarkerSeverity} from ‘monaco-editor; This import directly from monaco-editor broke the build, I guess it’s because in Monaco they are importing .css directly in .js and this is not allowed in by the new webpack anymore.

[Klaster1]

Had the same issue, here's what helped me:

1. Declare monaco as a symbol on Window for cases when I need to interact with it:

interface Window {
  monaco: typeof import('monaco-editor');
}

2. Use import type for types.

[nblitonrv]

Thanks for your comments here, and I am trying to solve the same issue, but I am not very experienced with typescript. @Klaster1 would you be willing to expand on your solution here?

[Klaster1]

Thanks for your comments here, and I am trying to solve the same issue, but I am not very experienced with typescript. @Klaster1 would you be willing to expand on your solution here?

The issue happens because "monaco-editor" (or ngx-monaco-editor?) has its own loader for CSS, but you import "monaco-editor" into the app, trigerring the asset load, which you might not have a webpack loader. One of solutions is not to perform runtime imports from "monaco-editor". You can still import types from "monaco-editor", for example import type {editor} from "monaco-editor", which won't trigger asset loading. In cases where you have to access run-time monaco code and can't do that off the <ngx-monaco-editor> component instance - for example, for global configuration - use the monaco object that's added to the global scope - Window.monaco. The interface Window merely adds types, otherwise it would all be seen as any, but would work.

[jimoj]

Hi, same issue here, and don't know how to use the Window interface you mentioned to interact with the library. Would you be so kind as to provide with some short example?

[lblackstone]

Thanks for the pointers @Klaster1! It took me a little bit to figure out the Window interface trick, so let me document how I got it to work.

// See https://stackoverflow.com/questions/12709074/how-do-you-explicitly-set-a-new-property-on-window-in-typescript
declare global {
    interface Window {
        monaco: typeof import("monaco-editor");
    }
}

// ...

setDiagnosticOptions() {
  window.monaco.languages.json.jsonDefaults.setDiagnosticOptions({
  //...
  });
}