WIP: feat(angular): add groovy in angular

[ls-infra]

as discussed in https://github.com/TypeFox/monaco-languageclient/pull/763 , adding groovy editor to angular to support multiple lang mode like https://microsoft.github.io/monaco-editor/ , (this will be a good starting point as well to attract angular devs to contribute to enhance the wrapper together.)

but i am getting below error ,
my first guess will be that https://github.com/TypeFox/monaco-languageclient/blob/main/verify/angular/package.json#L23 is overriding the original monaco-editor modules ?

thanks

[ls-infra]

hi , @kaisalmen , any idea for the above screenshot compile error ?

i added https://github.com/TypeFox/monaco-languageclient/pull/772/files#diff-6ccdef4ee1898bb434934b3a9d897e4abe51c9a6359ff77ebf055eb16bc1b5a3 but it does not seem like it will fix it .

thanks,

[kaisalmen]

Hi @ls-infra you can re-use the default editor worker loading instructions exported by the examples. The pre-compiled version of the wrapper is not required. I pushed the proposed changes here: https://github.com/TypeFox/monaco-languageclient/tree/feature/angular-groovy

It is one commit on top of yours (commit changes)

[ls-infra]

the code completion still not working in groovy(i used that docker compose ) but working in json

for the groovy connection to ws is green 101 but the JSONRPC WS message is not triggering when typing in editor .

i tried to run the npm run dev to see the groovy demo in /packages/examples/src/groovy got below error , this below is reproducible in the main branch as well.

✘ [ERROR] Failed to resolve entry for package "@typefox/monaco-editor-react". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

[kaisalmen]

i tried to run the npm run dev to see the groovy demo in /packages/examples/src/groovy got below error , this below is reproducible in the main branch as well.

I don't see this error. The groovy example works on main. Did you try to start fresh (clean node_modules, etc.)? There is npm run reset:repo that performs git clean on the repo.

There is now one other multi-languageclient example: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/multi/twoLanguageClients.ts

But it uses one editor and switches the code. It may be that there is a problem when you start two wrappers with two different languageClientWrapper configurations. I haven't tested this, yet. There could something go wrong in the global monaco-editor "wiring". Can you only use one editor for now?

[ls-infra]

the http://localhost:20001/packages/examples/groovy.html works , but the angular one is still not work with below errors : .angular/cache/18.2.10/ng-mlc/vite/deps/resources/package.nls.json 404 (Not Found) .angular/cache/18.2.10/ng-mlc/vite/deps/resources/dark_modern.json 404 (Not Found)

i just added the https://github.com/TypeFox/monaco-languageclient/pull/772/commits/d1a1dc76042e941292768664fc1376f8fdf5001c , seems like related , but still not working ,

thanks

[kaisalmen]

@ls-infra we can't unfortunately use @codingame/esbuild-import-meta-url-plugin even though angular now uses vite/esbuild. I haven't a way to make that work, yet. Production builds are fine.

[ls-infra]

@codingame/esbuild-import-meta-url-plugin is not part of the change in this PR . it is in the exiting code . do you mean we should remove it ?

the build is fine but the error related to package.nls.json and dark_modern.json is in run time not build time . and this two error is blocking the angular working with the Groovy lang server .

any idea i need to change to fix this ? thx

[kaisalmen]

@codingame/esbuild-import-meta-url-plugin is not part of the change in this PR . it is in the exiting code . do you mean we should remove it ?

No, the vite dev server uses esbuild and the plugin is used to overcome a problem with import.meta.url during dev (runtime!). This problem does not occur in production when rollup is used.

The angular dev server also uses vite and esbuild, but I tried to use that plugin in that past, but it doesn't work. Therefore we have this problem. With custom webpack configuration the problems were worse.

Investigations with these kind of problems is time consuming and have not found a solution, yet

[ls-infra]

does it mean that the angular wrapper can not work with Groovy lang server until further investigation on vite dev server . but the angular wrapper works with the JSON lang server tho, i wonder what is the difference . thx

[kaisalmen]

does it mean that the angular wrapper can not work with Groovy lang server until further investigation on vite dev server .

It is probably related to the different/ kind of resources that are being loaded. Does the problem exist If only thegroovy ls is used?

[ls-infra]

the vanilla js with Groovy LSP works well (https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/groovy/client/main.ts) , and the angular with JSON LSP works well (https://github.com/TypeFox/monaco-languageclient/blob/main/verify/angular/src/app/app.component.ts#L31)

just the angular with Groovy LSP does not work well and have issue as shown in the PR.

thx

[kaisalmen]

@ls-infra I need to dig into this, but did not yet find the time. I hope that will be possible next week.

[kaisalmen]

I would like to see this working as well.

[kaisalmen]

@ls-infra I force pushed an update an update to your branch here. It fixes the groovy language client and aligns with the latest api changes. See the commit here: https://github.com/TypeFox/monaco-languageclient/commit/ad358b251d646e33458a0e5051b9ac889d5c6a8e

I still did not succeed to get the esbuild plugin running, so syntax highlighting in dev mode is still broken. Although vite/esbuild is used internally the @codingame/esbuild-import-meta-url-plugin from @CGNonofr is not applied the same way. I need to find out why. 🤷‍♂️ Maybe, we should try the regular webpack based workflow again. This just works with next.js.

[ls-infra]

thx for that, but i am still not getting the code completion with the error ,

btw, should we try angular 19 to see if it will fix the vite issue ?

[kaisalmen]

Hi @ls-infra I tried Angular 19 and it didn't work, plus @angular-builders/custom-esbuild is not yet available for latest version.

Is the groovy container properly running? Did you check the logs? At least that part is working, so I get completions.