How to integrate an Angular 16 application into an existing AngularJS (v1.x) application?

Question

I am working on a project that currently uses AngularJS (v1.x). We want to slowly migrate some parts of it to Angular 16 without doing a complete rewrite at once. Specifically, I want to call a specific route in the AngularJS app and load the corresponding route from the Angular 16 application.

Additionally, I need to store data for a form builder in the Angular 16 app and render that data appropriately within this integrated environment.

What I’ve tried:

1. Using an iframe: I embedded the Angular 16 application within an iframe in the AngularJS app, but it did not work as expected and had limitations in terms of performance and interactivity.

Is there a better approach to integrate Angular 16 with AngularJS? Are there any best practices or techniques for seamless communication between the two frameworks, especially to pass data between the apps and render it?

What I Need:

1. Best approach to render Angular 16 content within AngularJS.
2. How to pass data between AngularJS and Angular 16 applications efficiently.
3. Any alternative ideas other than iframes or isolated routes.

I appreciate any help, examples, or resources on how to make this integration smooth!

Answer 1

1. If your AngularJs app is hosted at example.com, you can host your new angular app in a subfolder of that domain, like example.com/new, and then direct any pages that have migrated to the new app on the subfolder path.

   If you migrate your transactions page, for example, you could link users to example.com/new/transactions instead of example.com/transactions. You will have to fiddle around with your server so that it directs the requests for /new to the subfolder and not the AngularJs app. You could also try hosting the new app on a subdomain or different domain, but that could bring other challenges.

2. Use a cookie to pass data between the applications. Since they are both hosted on the same domain, both apps can read and write to each other's cookies. This works for small amounts of data, like a session token or other situational data.

3. Run both frameworks at the same time on the same page by bootstrapping them to separate HTML elements. Checkout some documentation on the Angular docs here, it mentions how to bootstrap the app component to a different DOM node.

   I have never done this, but in theory it's possible. You will have to do a lot of work to make sure the JS files don't collide, and I'm sure there will be some pipeline troubles, but if you can't deploy to separate folders, domains, or iframes, this may be the only other option.

Consider the iframe option more closely though. It's easy to use postMessage to communicate data between the parent and child window, and deployment is much easier. It feels wrong as a developer, but it is very feasible as a stop-gap measure, and whatever performance impacts there are may be the push your management needs to finish the migration to new angular.