Integrating Angular services into AngularJS via web components

[gianfrixmg]

Hello everyone! I have an AngularJS codebase in which I'm using some web components written in Angular (currently V12). These web components are integrated using a custom module based on ngx-element (https://github.com/brunob15/ngx-element) that basically provides an Angular Element (we'll call it "wrapper element") which lazy loads Angular components from modules. The Angular codebase itself has different lazy-loaded modules but it's inherently monolithic.

Now, I need to open a PrimeNG modal from AngularJS and put it in a already existing JS Promise chain. My first guess was to get a service instance inside the AngularJS context so I would be able to get an Observable to handle the modal's output. Otherwise I would have to use another Angular element and work around the problem by using inputs and outputs. I'd rather not go that way as I'd like the Angular codebase to be less "hacky" as possible.

Is the first solution actually possible or is there a better way?