2

I'm currently trying to bootstrap a large Angular 1.6.1 app to Angular 4.0.1 using the UpgradeModule. I've managed to successfully get the app to run, but I've noticed a significant slowdown with rendering times - so bad that it completely freezes after triggering a few events.

I suspect that it is an issue with the digest loop, and running the profiler I can see that the zonejs function calls are taking a very long time to process.

It's also unclear whether I should expect significantly slower rendering times whilst running a hybrid app?

I've also noticed some odd behaviour that may be related to the same issue. The promises seem to be working inconsistently. It seems like server responses are successfully returning, but the angular promises doesn't detect that it has returned - resulting in an infinite loading icon (I have a loader component which displays a loading icon until ALL promises have returned).

Is there anything in particular I could check for, that may be causing the slow rendering?

Here is my set up.

app.ts - main entry file

import 'zone.js';
import 'reflect-metadata';

import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './main.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;

    upgrade.bootstrap(document.body, ['main']);
});

main.module.ajs.ts - my AngularJS module (I've removed all dependencies for readability)

// AngularJS entry

import './exampleDep/exampleDep.module';

import { CONFIGURATION } from '../config';

angular
    .module('main', [
        'ngRoute',
        'exampleDep'
    ])
    .config(applicationRouting)
    .run(applicationInit)
    .constant('CONFIGURATION', CONFIGURATION);

function applicationInit($rootScope, CONFIGURATION) {
    $rootScope.CONFIGURATION = CONFIGURATION;
}

function applicationRouting($routeProvider, $analyticsProvider) {
    $analyticsProvider.firstPageview(false);
    $analyticsProvider.virtualPageviews(false);
    $routeProvider
        .when('/?', {
                reloadOnSearch: false
        })
        .otherwise({
                redirectTo: '/'
        });
}

main.module.ts - my Angular module

// Angular entry

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ],
    bootstrap: []
})

export class AppModule {
    ngDoBootstrap() {}
}
remi90
  • 341
  • 1
  • 4
  • 20
  • The performance will worsen for obvious reasons. You've just added Angular (which is quite a burden) to the app but haven't used any of its performance improvements. It's not clear how bad the things are. I guess http://stackoverflow.com/help/mcve is necessary to replicate this - a plunk or a repo. – Estus Flask May 08 '17 at 16:22
  • for example, scroll rendering is performing at around 2/3fps. It's not just a little slower, it's significantly slower (50%) – remi90 May 08 '17 at 16:26
  • It's quite difficult to produce a plunkr for this particular issue since it appears to be due to the sheer size of the application I'm working on. I would have expected a slight hit on rendering performance but wasn't expecting my app to be completely unusable. – remi90 May 08 '17 at 17:11
  • If this is expected, then my next step would be to upgrade my components to Angular and make use of its performance benefits, but this defeats the point of the UpgradeModule if in the meantime my app is unusable. The main appeal of the UpgradeModule is the ability to incrementally migrate from AngularJS to Angular over time. Seems like I may have to do it all in one hit, and had I known I would have just started a brand new Angular project. I'm interested to know if people have experienced the same with larger apps and whether they have any suggestions – remi90 May 08 '17 at 17:17
  • I have no real-world experience with UpgradeModule so I would like to listen to user stories as well. But yes, if we're talking about x2 decrease in performance, this looks reasonable, while x20 would probably look fishy. If app modules was decoupled enough to give an opportunity to fix performance-critical directives first, this looks like a good way. – Estus Flask May 08 '17 at 17:50
  • I've also noticed some odd behaviour that may be related to the same issue. The promises seem to be working inconsistently. It seems like server responses are successfully returning, but the angular promises doesn't detect that it has returned - resulting in an infinite loading icon (I have a loader component which displays a loading icon until ALL promises have returned). – remi90 May 08 '17 at 18:55
  • Not sure what this means. Probably zone.js was loaded too late, or wrong zone.js version was used. Make sure that there are no errors in console that could explain this. This looks like a subject to open an issue in Angular repo. But you will surely need working example to demonstrate this. – Estus Flask May 08 '17 at 19:05
  • 1
    Thank you very much with your help on this @estus. I was able to verify that the rendering slowdown was due to a library I used within the app (Angular-vs-Repeat). Removing this library as a dependency immediately fixed the issue and my app is now rendering just as quick as it was before the hybrid bootstrap. I will raise an issue within the library's repo to see if this can be resolved. – remi90 May 09 '17 at 09:21
  • Glad it worked for you. Yes, I guess vs-repeat is hacky enough to be a troublemaker. – Estus Flask May 09 '17 at 12:36

0 Answers0