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 🙏