8

I am trying to figure out if we can move our Angular 1 application to Angular 2. We have a sufficient amount of code to warrant using ng-upgrade as opposed to starting from scratch.

Our current application is pushing the performance limits of what Angular 1 is capable of. Hopefully Angular 2 will bring us some performance benefits.

My question is how much of an impact on performance our migration path will have (i.e. running Angular 1 alongside Angular 2 as per ng-upgrade guidelines)? Will it have a noticeable impact or will it not be noticeable in practice? My main concern during this period is run time speed as opposed to memory usage or load time.

Chris
  • 26,744
  • 48
  • 193
  • 345

3 Answers3

5

Not sure if this thread is still relevant, I'll try to add some further notes. Currently we are at Angular 6, and the upgrade behavior has gotten a lot better.

For anyone having performance issues or thinking there might be issues I recommend have a look at the downgradeModule (https://angular.io/api/upgrade/static/downgradeModule#differences-with-upgrademodule)

You basically can either Upgrade the Angular 1 part or downgrade the Angular 2 part. On a first view they might seem similar but the behave fundamental differently. For anyone concerned with performance I definitely recommend the latter approach. This way you will have the improved performance for your new Angular 2 code and the old code runs at nearly the same/if not the same speed.

Even for fairly large applications it is a breeze and you very rarely have any performance problems.

Nicolas Gehlert
  • 2,626
  • 18
  • 39
  • Thanks Nicolas... Did you use the Angular CLI and how did that work in terms of upgrade? Currently our NG1 application is using a custom webpack configuration but would want to migrate to the Angular CLI - unsure if itll support a AngularJS / Angular hybrid app? – Chris Jul 24 '18 at 09:29
  • no, also using custom webpack and works like a charm. can't use Angular CLI because of to much custom stuff (they even recommend themselves using webpack if you have a lot of custom stuff to do). But AFAIK a basic setup with upgrade ng1/ng2 also works with the Angular CLI – Nicolas Gehlert Jul 24 '18 at 09:31
  • Hi Nicolas.. I have finally had time to test this out.. Got the downgradeModule working (I think) but when I use downgradeComponent nothing is ever rendered. Did you run into this issue? Is there any chance you could perhaps have a look please? https://stackoverflow.com/questions/52482934/angular-downgradecomponent-not-being-created – Chris Sep 25 '18 at 08:53
  • Hi Chris , added an answer to your post – Nicolas Gehlert Sep 25 '18 at 09:09
3

You should know that there are two ways to bootstrap a Hybrid App:

  1. UpgradeModule - bootstraps both the AngularJS (v1) and Angular (v6) frameworks in the Angular zone

  2. DowngradeModule - bootstraps AngularJS outside of the Angular zone and keeps the two change detection systems separate.

I have tried both ways. And I recommend using DowngradeModule - it's better for performance and memory leaks.

Oleg Dikusar
  • 2,163
  • 1
  • 10
  • 9
2

I am currently in similar shoes and the only thing I know is that the digest cycles of A1 and A2 trigger each other. This makes me think that during upgrade, things will be slower... I will update you if I find anything different in coming months. https://angular.io/docs/ts/latest/guide/upgrade.html#!#change-detection

Everything that happens in the application runs inside the Angular 2 zone. This is true whether the event originated in Angular 1 or Angular 2 code. The zone triggers Angular 2 change detection after every event. The UpgradeModule will invoke the Angular 1 $rootScope.$apply() after every turn of the Angular zone. This also triggers Angular 1 change detection after every event.

jssayin
  • 93
  • 1
  • 6
  • 1
    How did this turn out? 2 years later, I'm curious if you saw a slow down. Thanks! – TimH Feb 26 '19 at 16:15