fix bugs and move to angular 21

[tbo47]

I tested this update with my angular 20 project. Everything works fine.

I updated angular 20 to 21 following this guide: https://angular.dev/update-guide?v=20.0-21.0&l=1

Update monaco lib to the latest 0.55.1

It fixes the error:

Error: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from /assets/monaco/vs/language/typescript/tsWorker.js

[fpaul-1A]

Hi,
I was wondering if it wouldn't be better to put a more permissive range here
^0.55.1 is equivalent to >=0.55.1 <0.56.0-0
isn't the intended range more like >=0.55.1 <1.0.0-0 ? or is it intentional to force the exact minor version ?

[tbo47]

What about:

  "peerDependencies": {
    "@angular/common": ">=20",
    "@angular/core": ">=20",
    "monaco-editor": ">=0.51"
  },

Because it works with angular 20 and 21 so far.

[fpaul-1A]

looks good to me

[tbo47]

@miki995 thoughts?

[Verten]

Thanks god, i also found the console error in my browser.

TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from ./assets/monaco-editor/min/vs/language/json/jsonWorker.js

So, is it means when we upgrading to latest monaco editor version can be fixed it? thanks again

[tbo47]

Thanks god, i also found the console error in my browser.

TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from ./assets/monaco-editor/min/vs/language/json/jsonWorker.js

So, is it means when we upgrading to latest monaco editor version can be fixed it? thanks again

Are you using the latest monaco-editor 0.55.1?
I don't see this error. I tested on a angular 20 and angular 21 project.

[jelledijkstra97]

+1

[tbo47]

I ended up using monaco directly in my angular project: https://tbo47.github.io/angular-monaco-editor.html

[rellit]

Any information on when we can move on to angular 21?

If it helps, I had to do the following in my code to use monaco 0.52.1 with angular 19:

angular.json: Remove leading /

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

becomes

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

And register a base URL:

`{ provide: NGX_MONACO_EDITOR_CONFIG, useValue: {} }`

becomes:

{
      provide: NGX_MONACO_EDITOR_CONFIG, useFactory: () => {
        const base = new URL('assets/monaco/min/vs', document.baseURI).toString().replace(/\/$/, '');
        return {
          baseUrl: base
        };
      }
    }

[LiamCalculus]

Also need an update, this is blocking our upgrade to Angular v21

[tbo47]

Also need an update, this is blocking our upgrade to Angular v21

@LiamCalculus I recommend integrating monaco and angular directly, it's not that hard https://tbo47.github.io/angular-monaco-editor.html

[matheo]

@miki995 a release for Angular v21 will be super appreciated 🙏

[sbknch]

Is there any chance of getting anything merged? 🤓

[W014ara]

Is this version planned for release? The PR has been open for two weeks now.

[aceArt-GmbH]

Also need an update, this is blocking our upgrade to Angular v21

@LiamCalculus I recommend integrating monaco and angular directly, it's not that hard https://tbo47.github.io/angular-monaco-editor.html

But it does get harder once you want to set and get the current value as well as have application wide defaults, or am I wrong? @tbo47
Thats basically what this package is providing. If you have a simpler solution for the same use case, I would like to switch too

[tbo47]

But it does get harder once you want to set and get the current value as well as have application wide defaults, or am I wrong? @tbo47 Thats basically what this package is providing. If you have a simpler solution for the same use case, I would like to switch too

I updated the doc https://tbo47.github.io/angular-monaco-editor.html

• to show show how to get the value in the editor const code = this.monacoEditor.getValue()
• share defaults for the monaco editors in your app export const GLOBAL_MONACO_OPTIONS = { theme: 'vs-light', language: 'javascript' }

[ferencizsepi]

Hi! Just checking in to see if there are any updates on this PR. It would really help us, as our Angular 21 upgrade currently depends on it.

[miki995]

I will check this evening to release 21.Thanks for patience, cheersSent from my iPhoneOn Feb 3, 2026, at 6:25 PM, Ferenc Izsépi ***@***.***> wrote:ferencizsepi left a comment (miki995/ngx-monaco-editor-v2#44) Hi! Just checking in to see if there are any updates on this PR. It would really help us, as our Angular 21 upgrade currently depends on it. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[gabrielwerzner]

I will check this evening to release 21.Thanks for patience, cheersSent from my iPhoneOn Feb 3, 2026, at 6:25 PM, Ferenc Izsépi @.> wrote:ferencizsepi left a comment (miki995/ngx-monaco-editor-v2#44) Hi! Just checking in to see if there are any updates on this PR. It would really help us, as our Angular 21 upgrade currently depends on it. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.>

Thanks a lot, we also have been stuck with this for very long

[ReneZeidler]

I currently have this in my main.ts:

(window as any).MonacoEnvironment = {
  getWorkerUrl: function () {
    return 'assets/monaco/min/vs/base/worker/workerMain.js';
  },
};

and this in my angular.json:

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

Monaco 0.53.0 introduced significant changes to the AMD build (the /min subdirectory) and ended official support for it: https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0530
The build no longer includes the workerMain.js. It also includes some changes that now loads workes from a blob: URL: microsoft/monaco-editor@6f3fbe8#diff-bd645b0e931b0298188b9757ee9f252c5f409a38b23600f30a1f790b44cd70d4R39-R55
If you have a restrictive Content Security Policy, loading workers from a blob: URL is not allowed (since this is equivalent to allowing unsafe-eval).

It seems like the solution would be to switch to the ESM build, but I haven't tested how that would work.

[Meggie886]

I will check this evening to release 21.Thanks for patience, cheersSent from my iPhoneOn Feb 3, 2026, at 6:25 PM, Ferenc Izsépi @.> wrote:ferencizsepi left a comment (miki995/ngx-monaco-editor-v2#44) Hi! Just checking in to see if there are any updates on this PR. It would really help us, as our Angular 21 upgrade currently depends on it. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.>
Thanks a lot ! we are facing the problem too. Waiting for the updates

[gabrielwerzner]

Angular 22 is releasing next month, I believe its safe to say we are cooked

[ferencizsepi]

Any chance to make this package work with the upcoming Angular versions, or should we all switch to direct monaco integration?

[louisjrdev]

Could do with this change too, this is blocking our upgrade to angular 21

[gabrielwerzner]

Any chance to make this package work with the upcoming Angular versions, or should we all switch to direct monaco integration?

We have already started doing the direct integration in our company, even if he owner actually merges it, we can't rely on hopes and dreams for months to be able to upgrade our packages.

[ilaoud]

Could do with this change too, this is blocking our upgrade to angular 21

[PAX523]

@miki995, are you busy? Could you please take some time to review this pull request?

[sbknch]

We removed the lib and implemented the proposed way - thanks a lot @tbo47. Our solution is based on your implementation.

Our main looks like this to avoid ts and eslint complains

// Configure Monaco Editor environment with baseUrl support for locale-aware deployments
const monacoBaseUrl = new URL('assets/monaco', document.baseURI).href;

interface MonacoEnvironment {
  getWorkerUrl(moduleId: string, label: string): string;
}

declare global {
  interface Window {
    MonacoEnvironment: MonacoEnvironment;
  }
}

window.MonacoEnvironment = {
  getWorkerUrl: (moduleId: string, label: string): string => {
    if (label === 'json') {
      return `${monacoBaseUrl}/esm/vs/language/json/json.worker.js`;
    }

    return `${monacoBaseUrl}/esm/vs/editor/editor.worker.js`;
  },
};

And our editor implementation, the dialog is a web component from another lib - thats why we implemented the open fn:

export class CodeViewerComponent implements OnDestroy {
  readonly ourWebComponentDialog = viewChild.required(OurWebComponentDialog);
  private readonly editorContainer = viewChild<ElementRef<HTMLDivElement>>('editorContainer');
  private monacoEditor?: monaco.editor.IStandaloneCodeEditor;

  constructor() {
    effect(() => {
      const container = this.editorContainer();
      if (container && !this.monacoEditor) {
        this.initializeEditor(container.nativeElement);
      }
    });
  }

  ngOnDestroy(): void {
    this.monacoEditor?.dispose();
  }

  open(data: CodeViewerData): void {
    this.ourWebComponentDialog().open();

    // Update content after a short delay to ensure editor is initialized
    setTimeout(() => {
      this.updateEditorContent(data);
    }, 0);
  }

  private initializeEditor(container: HTMLDivElement): void {
    this.monacoEditor = monaco.editor.create(container, {
        ... your init data here
    });
  }

  private updateEditorContent(data: CodeViewerData): void {
    if (!this.monacoEditor) {
      return;
    }

    const model = this.monacoEditor.getModel();
    if (model) {
      monaco.editor.setModelLanguage(model, data.language);
      model.setValue(data.formattedValue);
      // Reset cursor and scroll position to top if opening with different data
      this.monacoEditor.setScrollPosition({ scrollTop: 0, scrollLeft: 0 });
      this.monacoEditor.setPosition({ lineNumber: 1, column: 1 });
    }
  }
}

Have a nice day :)