Integrating Langium WebWorker to Angular

[Franz-Ritter]

Hello,

I'm seeking assistance with integrating a Languium web worker into an Angular application.

I have followed the documentation provided at https://langium.org/tutorials/langium_and_monaco/ to create a web worker and successfully integrated my own grammar. The application works flawlessly when launched on an Express server.

Now, I'm facing challenges when trying to transfer the web worker to my Angular application. Defining the web worker in the same way as in Express did not work, as Angular seems to modify the provided JavaScript file, leading to an exception:

var _asyncToGenerator = require("<path_to_project>/node_modules/@babel/runtime/helpers/asyncToGenerator").default;

In an attempt to find a solution, I referred to the official Angular documentation at https://angular.io/guide/web-worker#adding-a-web-worker. However, I am unsure about how and where to define the MonacoEditorLanguageClientWrapper to be launched with the web worker.

If anyone has experience with integrating a Languium web worker into an Angular application, I would greatly appreciate your help or any suggestions on how to proceed.

Thank you in advance for your assistance!

[msujew]

Hey @Franz-Ritter,

We have an example for an integration of monaco-languageclient in Angular here. It's not based on a webworker, but rewiring it to use a webworker shouldn't be too difficult.

@kaisalmen Any further recommendations?

[msujew]

I think you misunderstand. The Monaco editor will always run in the main JS thread. Only the Langium code will run in the webworker. As far as I can tell, Angular is using the normal JS webworker API, but with some special bundling code. There should be no additional translation needed for the monaco-languagclient to work correctly with the webworker.

[Franz-Ritter]

Yeah, I am quite new to the langium technology stack, so its quite possible that I mix some stuff up. So far I also had the impression that angular uses straight forward the standard js webworker API. Though, I am not sure how to combine the angular way of "special bundle coding" with the monaco-languageclient to call the "langium-server" in the webworker. Atm I continue to read into the example you provided me, and also read and understand the source code of the MonacoEditorLanguageClientWrapper to understand all calls which are made by the wrapper.

All angular examples using a web worker are quite simple with just one function call. I have the feeling the communication between langium and the web client is more advanced.

[msujew]

All angular examples using a web worker are quite simple with just one function call. I have the feeling the communication between langium and the web client is more advanced.

It is, but only under the hood, i.e. on the LSP protocol level. As a consumer of both, you shouldn't need to worry about them. An example for how the worker can be integrated can be seen here. I don't think we have a dedicated Langium/webworker example for the pure monaco-languageclient library, but we also don't have an example on how to integrate monaco-editor-wrapper into Angular, so you'll need to combine whatever we do in here with what we do here.

[Franz-Ritter]

Okay, thanks. I try to follow your recommendations, and will come back with some feedback. Would be nice to get this working

[msujew]

You can probably replace the createWebSocket function from here with this:

import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageserver-protocol/browser';
...
worker = new Worker("some worker url here", {
    type: workerConfig.type,
    name: workerConfig.name
});
const messageTransports = {
    reader: new BrowserMessageReader(worker),
    writer: new BrowserMessageWriter(worker)
};
const languageClient = this.createLanguageClient(messageTransports);
languageClient.start();

[Franz-Ritter]

Update in case someone has similar issues:

So far, the Client and the communication with the web worker was not the problem. But thanks for the suggestions. I had trouble to launch the web worker itself in Angular.

Based on the Documentation here I was able to create a javascript file which supports my grammar. Anyway, once I tried to launch the web worker with a relative path to the script in an Angular component, angular seemed to compile the web worker javascript again and tried to attach some babel features for await operations in the script:

var _asyncToGenerator = require("<path_to_project>/node_modules/@babel/runtime/helpers/asyncToGenerator").default;

This resolved in an error angular web worker uncaught referenceerror: require is not defined.

I was able to solve that Problem by putting the web worker file in the assets folder of the project and reference to it absolute to the project:

const lsWorker = new Worker("assets/my-web-worker.js")

I still get small issues, such as http://localhost:4222/monaco-editor-workers/workers/editorWorker-iife.js 404 (Not Found) But the core functionality seems to work, which is already a big win.