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

Question

I am using "ui-router" hybrid (https://github.com/ui-router/angular-hybrid) bootstrapped the "classic" way.

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

I am trying to use the downgradeModule() bootstraping method described in the above document to solve the performance issue, but have not been able to.

Can't have the Angular module bootstrap, no errors though. Here is how I do it. Contacts button (the Angular module) does nothing.

https://stackblitz.com/edit/github-ypge8f-jmshp3

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. This question is also posted here

Answer 1

After a long struggle with this, I think I finally figured it out. The ui-router makes it harder to deal with this as all the Angular hybrid examples using downgradeModule use the built-in router. Updated the code to make it work: https://stackblitz.com/edit/github-ypge8f-jmshp3 The tricks were:

• The Angular bootstrap module needed a parameter of type "UIRouter" in the constructor, otherwise it would not bootstrap its states:

export class AppModule { constructor(private router: UIRouter) { // "router" needed in constructor to bootstrap angular states }

• The urlService has to be stopped before bootstrap and restarted after, like in the regular hybrid example

• Restarting of the urlService has to happen in a "setTimeout" call (could not find a better way to hook this action) to allow Angular states to bootstrap when reloading a page with a url from one of these states.

setTimeout(() => { // setTimeout needed to allow angular routes to initialize after refresh urlService.listen(); urlService.sync(); });