How to properly integrate Angular applications into Eclipse Theia? #13723
Replies: 1 comment 1 reply
-
Hey @friendlyAce, not-an-angular dev here, so don't expect too much input on the Angular front from me, but I can answer some of your other questions.
Generally, you get the best UX when you directly integrate your app as a widget. Something like the Angular elements guide should result in good integration. Once you have a web-component for your Angular element, you should be able to render it into a Theia
non-React, yes. since Theia is mainly pure HTML. It's just some components that are written in React, so we offer some integration for that. I'm not aware of any public examples that offer anything wrt to that.
If you follow the guide linked above, webpack should bundle everything into a single (chunked) bundle. That should alleviate the need to provide separate hosting for the angular app.
There currently is no hot reloading available, since Theia isn't served by webpack, but by its own backend server. I'm not sure how well hot reloading can be integrated into the backend.
None that I'm aware of.
I'm not sure how well RCP-over-SWT/CEF performs, but Theia generally behaves quite well due to its decentralized rendering model - most work is done on the backend and the plugin host (a separate process), while the frontend is completely separated from that. Due to that, the frontend usually runs fairly smooth, even if the other processes are doing some heavy lifting.
None that I'm aware of.
You would just integrate your Angular code directly with the rest of the JavaScript based frontend application. Theia features a bunch of event handling mechanisms based on an emitter/event pattern. The communication with the backend is done via RPC (remote procedure call), see here for more info.
We just use inversify, a dependency injection library to integrate with services. See this guide.
Since the angular app should be part of the bundle, there shouldn't be any additional packaging/deployment process necessary. |
Beta Was this translation helpful? Give feedback.
-
Hi,
i recently discovered this project and it seems pretty exiting and IMO has a lot of potential.
We are currently using the Eclipse RCP framwork for creating a custom workbench with plenty of views etc.
We are using an custom chromium embedded java-cef (Java SWT port of cef) build to host an angular application within jcef in an eclipse editor.
We still have some heavy dependencies to Eclipse/RCP (project/user Preferences, osgi services, selection handling, eclipse and custom extension points, etc.)
I havent read the full Theia documentation yet, but from what i was already reading, this shouldnt be a big deal, since most of these features are available in theia, just have to be re-implemented/migrated.
Ill need to investigate and do some testing on that later on.
My objective:
Currently, i am trying to create a proof of concept for our project on how the migration away from Eclipse RCP to Eclipse Theia could work,
so that we can consider migrating our project to it, as our development is more web-focused anyways and for most parts we dont heavily rely on SWT etc. anymore.
My aim is to embed an Angular 17 application within the editor section of Eclipse Theia.
However, I couldn't find comprehensive examples or documentation for this specific use case, except for the React widget example or the Tree editor within theia.
And when searching for "Eclipse Theia and Angular", there its only mentioned that Eclipse theia just goes well with web frameworks such as React, Vue, Angular in general, but i couldnt find much more detail, docs, examples on that.
So I was wondering what the preferred way for embedding an Angular 17 application as an editor/widget in the ecipse theia framework should look like and how the angular app can communicate with the extensions/features of the theia framework.
From what i was reading in the Issues when searching for the keyword Angular, is that most people asked for a way to integrate Theia as module/section within existing angular applications, via the core theia npm dependency.
I also tried that, havent had much success to get that running yet, but this doesnt really seem relevant to me for the project, as we want to use Theia as a RCP framework replacement to display angular developed components/logic and not the other way around, so i discarded that approach.
Proof of Concept:
To familiarise with theia and explore the integration a little bit and for getting some insights on how the concepts and architecture in Theia works, i created a small PoC project, the sources can be found here: https://github.com/friendlyAce/theia-application
I discovered and adapted the React widget example for my angular application.
I first started off by creating a simple angular 17 demo project.
https://github.com/friendlyAce/theia-application/tree/master/theia-angular-app
After that, with yo theia-extension i created a simple hello world and editor extension, to see how the workflow with yarn works on a multi npm project mono repo and how i could build & run both the electron desktop app and the browser app.
After doing some testing and trying out the example, on how to add context menu entries to existing menus and how to register the contributor & consumer logic i started working on the PoC.
My first approach was to extend the Theia Base Widget, https://github.com/friendlyAce/theia-application/blob/master/theia-extensions/angular-widget/src/browser/angular-widget/angular-root-widget.ts
that internally used an iframe to reference the running angular application on port 4200 via <iframe src="http://localhost:4200">, this worked fine, but this requires the angular app to be served/hosted separately.
After a bit of trying and since angular apps are just some bundled html and js, i thought of maybe i can use the angular build dist/ output of my angular app and make Theia access, execute & instanizate the root app component.
For that i extended my AngularWidget, to just create some div container that later will hold my app-root angular entry component and add the main.js script of my angular app to the script headers.
Now all there was left to somehow figure out where to put the angular dist/ build output and copy-paste it there via some npm/yarn script, to both the electron & the browser directories.
After fixing some smaller issues, i ended up seeing my running angular app in a view in eclipse theia:
Screenshot: https://github.com/friendlyAce/theia-application/blob/master/poc_screenshots/electron_and_browser_with_ng.png
However, this approach somehow doesn't feel quite right, more like a kind of workaround, which is why I wanted to ask how such an integration of a web framework (like explicit angular) should actually look like?
Questions
BR,
Vincent
Beta Was this translation helpful? Give feedback.
All reactions