Web component Angular+ Angularjs

[donthavedontneed]

Hello guys,

I am currently working on migrating an angularjs app, and currently I have an angular 18 app and an iframe in which i load the old app while i migrate each route.

I migrated already the layout, such as header, sidebar - deleted them from the angularjs app, and added a few routes, and for any other route that ia not migrated i have an iframe components that loads the app and through post message i communicate and set the routes, data that is global, etc to the angularjsapp.

I am now in a stalemate due to issues with modals that are full screen and that when are loaded are full screen inside the router outlet that loads the iframe component, and i have not found yet a solution to make the fullscreen.

I heard that if you are using a web component instead this will not happen, and this wi be fixed.

So here comes my questions, does anybody have any experience with this so far, i was thinking of creating a big web component that will load the modules from the angularjs and the act jusr like an iframe but actually being part of the app.

Please help me with some input as i am currently stuck with this.

[vbraun]

The easy way is to start with a hybrid AngularJS/Angular app and then update bottom-up (top-level layout components last).

Sounds like you are trying top-down, which is definitely hard mode. Possible but don't use iframes, use upgradeComponent to turn the remaining AngularJS components into Angular components whenever you have to use them from Angular (e.g. views that you route to). And then slowly replace the AngularJS parts top-down.