1

I've got an AngularJS app that I'd love to upgrade to the latest version of Angular. However, the problem is that the app uses a dozen of different 3rd party libraries that don't support Angular v.2.

Is it OK to run a hybrid Angular+AngularJS application on a live site? By "OK" I mean that the are no serious performance implications compared to running a pure AngularJS or Angular application.

The Angular docs are clear about how to perform the transition from AngularJS to Angular, but they are unclear whether ngUpgrade is supposed to be used in a live project.

Maksym
  • 458
  • 4
  • 23
  • 1
    It's ok, as long as you understand what are these implications and where they come from. You're not limited to ngUpgrade. You can actually bootstrap A1 sub-app inside A2 component, and it won't have any overhead that ngUpgrade may introduce (as long as the component isn't destroyed too often); it's basically same thing as running React sub-app inside Angular, which is ok too. – Estus Flask Jan 31 '18 at 20:11
  • Well, it seems to be a bit weird. I thought that loading AngularJS inside Angular (either with ngUpgrade, or as a sub-app, like you suggest) would really influence the performance. It's like having 2 apps instead of 1, so it should be twice (or, at least, notably) less performant, no? – Maksym Jan 31 '18 at 20:20
  • It will be less performant if A2 app is tightly linked with A1 internals. To my knowledge, this is what happens with ngUpgrade, it tries to integrate A2 change detection with A1 digests. I'd suggest to check ngUpgrade source code for some ideas. Without ngUpgrade sub-app will run in total isolation (you may also want to use runOutsideAngular). It won't have performance overhead but you will have to make sure that it interacts with parent components the way you expect, trigger change detection manually, etc. – Estus Flask Jan 31 '18 at 21:03

1 Answers1

1

This question is outdated, but maybe my answer will help someone.

We have a large commercial product (banking web-application) and we use a hybrid application on a live site. Our testers and clients did not notice any changes in the work of the site.

We migrate services and components from AngularJS 1.5 to Angular 6, and it will take at least a half year.

A few tips:

  1. To avoid all issues with $digest and performance I recommend using DowngradeModule - it bootstraps AngularJS outside of the Angular zone and keeps the two change detection systems separate. The first hybrid app used UpgradeModule and we had a lot of problems, - this approach is not for large applications.

  2. Use similar code before bootstrapModule(AppModule)

import { enableProdMode } from '@angular/core';

if (IS_PRODUCTION) {
   enableProdMode();
}

If you have any questions - you are welcome.

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