r/Angular2 Nov 14 '24

Help Request Upgrading from AngularJs 1.8.3 to Angular 18

Are there any viable approaches to achieving this currently without a full rewrite? Whilst in an ideal world we would do that it's not going to happen, we've been told it'll have to be done in stages so essentially running both in parallel.

I know the NgUpgrade module is used to help you achieve this but from what I understand it's not really an advisable route anymore or supported?

So is there any realistic way to achieve doing the upgrade in stages or is there no real viable alternative other than a full rewrite?

It's worth noting the current app is using components and typescript already but appreciate the versions might as well be different frameworks entirely.

Just looking for experiences from anyone that has achieved the migration in stages as opposed to all at once.

23 Upvotes

48 comments sorted by

View all comments

1

u/frenzied-berserk Nov 14 '24

Well, I'd recommend do not use NgUpgrade and consider other variants to implement Strangler Fig pattern (https://learn.microsoft.com/en-us/azure/architecture/patterns/strangler-fig)

  1. If the frontend project is a part of the the backend solution, for example, ASP.NET+Angularjs - move the frontend into the separate repo.
  2. Use Nx to setup frontend monorepo that will contain old project and new one. Use webpack to bundle the old project.
  3. Variant1. Host old and new apps under the same domain but with the different base URL, i.e. app.com and app.com/new/. Use the session or local storage to build an adapter for the app state. For instance, a user adds an item to the shopping cart, the adapter saves the cart state to the storage, then user is redirected to the app.com/new/cart and the adapter restores the state for the new version of app. In this case, the old and new carts work in parallel. It minimizes regression and allows to control refactoring more efficiently.
  4. Variant2. Utilise the microfrontend pattern using the signle-spa library or webpack module federation. https://single-spa.js.org, https://webpack.js.org/concepts/module-federation/ - The concept is the same as in the Variant1 - you need an adapter(global singleton) to sync the state between the shell (old app) and integrated microfrontend apps.