How to boostrap app with ui-router hybrid using downgradeModule()

[florin05]

We have a hybrid ui-router app using the "classic" bootstraping way using UpgradeModule. We are experiencing performance issues on "hover" and other events noticeable in data grids. We think it is due to the change detection overlap/multiplication between the 2 versions described here.

https://pr18487-aedf0aa.ngbuilds.io/guide/upgrade-performance

So we are trying to use the downgradeModule() bootstraping method described in the above document to solve the performance issue.

I can't seem to be able to do it though, following the example described here:

http://www.syntaxsuccess.com/viewarticle/angular-ngupgrade-with-downgrademodule

Getting error:

stateService.js:41 Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: Trying to get the Angular injector before bootstrapping an Angular module.)

Here is how to reproduce: https://stackblitz.com/edit/github-ypge8f Open the app in it's own window , press the "Messages" button and see the error in console.

[ShiftedBit]

See https://stackoverflow.com/a/48668591. Try to implement a simple angular component directly after body begins to bring angular in place.

We also had performance issues, so we also use downgradeModule. The downside is, that we cannot go the UpgradeShell way for upgrading our angularjs app partially. I will also try ui-router hybrid to upgrade route by route.

[florin05]

@ShiftedBit , thanks. I tried that and it got rid of the error. But the Angular app does not bootstrap. The "Contact" button on the page which is supposed to go to a Angular module does nothing

https://github-ypge8f-jmshp3.stackblitz.io

I also tried to bootstrap directly the "Contacts" Angular module, (the "App" one lazyloads the "Contacts" and thought that may be an issue) but the result is the same

[florin05]

I think I figured it out, updated the code here. The main tricks, beyond the normal examples that apply to Angular router, were to pass UIRouter in the constructor of the Angular module and to restart the URLService in a setTimeout callback (wish I found a better way)

Posted this here too: https://stackoverflow.com/a/49568050/4386338

[ShiftedBit]

@florin05 Thank you for your hint with the timeout!

I put the whole urlService Logic into the constructor of the bootstrap component. There Angular is loaded, so ready to go for the urlService. No need for the timeout anymore.

import {Component} from '@angular/core';
import {UrlService} from "@uirouter/core";

@Component({
    selector: 'service-bootstrap',
    template: ''
})
export class ServiceBootstrapComponent {
    constructor() {

        console.log('Angular Bootstrap');

        const injector: angular.auto.IInjectorService = angular.element(document).injector();
        const urlService: UrlService = injector.get('$urlService');
        // setTimeout needed to allow angular routes to initialize after refresh
        urlService.listen();
        urlService.sync();
    }
}

Still testing, but that could be the way to go.

[ngehlert]

I had the same problem. Thanks for pointing to the SO article @ShiftedBit . And I didn't implement the timeout, I already had it set up the way mentioned in the previous comment. Maybe it makes sense to add a little note to the readme how to set up with downgrade module?

Thanks for saving my day :D

[stnor]

I converted my UpgradeModule project to downgradeModule today, and as the feature needs documenting, I created a diff for the changes I made. Perhaps it is of use to someone.

hybrid-downgrade.patch.txt

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. This does not mean that the issue is invalid. Valid issues may be reopened. Thank you for your contributions.