atularen / ngx-monaco-editor

Monaco Editor component for Angular 2 and Above
https://www.npmjs.com/package/ngx-monaco-editor
MIT License
428 stars 155 forks source link

Angular 14 #259

Open JoeMellon opened 2 years ago

JoeMellon commented 2 years ago

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 commented 2 years ago

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

miki995 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

ComeAlongErica commented 2 years ago

@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 commented 1 year ago

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

miki995 commented 1 year ago

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

nhack commented 1 year ago

@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 commented 1 year ago

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

nhack commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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({
  //...
  });
}