Angular's ApplicationRef never fire "isStable = true" in Firefox because of pace-js

[dstj]

Hi,

OK, it's a weird one, granted, but I'm at a loss... :/

Description

In Firefox, simply adding pace-js to the application causes Angular to never fire the ApplicationRef.isStable = true event. But, in Chrome, Edge, Brave, it fires like expected...

Reproduction

1. Install the Angular CLI
2. Create a new clean Angular app: ng new testapp
3. Add the following in app.component.ts:

   constructor(appRef: ApplicationRef) {
       appRef.isStable
         .pipe(
           tap((isStable) => console.log('stable', isStable)),
           first((isStable) => isStable),
           take(1)
         )
         .subscribe(() => {
           console.log('******** Application is stable **********');
         });
     }
   

4. Run ng serve and confirm the output (in Firefox)

[webpack-dev-server] Live Reloading enabled. stable false Angular is running in development mode. Call enableProdMode() to enable production mode. stable true ******** Application is stable **********

5. Add pace-js to the appliation: run ng add pace-js
6. Modify angular.json to include the pace-js script:

           "scripts": [
             "node_modules/pace-js/pace.min.js"
           ]
   

7. Run ng serve again and confirm the output (in Firefox)

[webpack-dev-server] Live Reloading enabled. stable false Angular is running in development mode. Call enableProdMode() to enable production mode.

Problem: The application never become "stable"! In Chrome and Edge, the isStable = true "event" is fired as expected.

The Angular doc about ApplicationRef says:

the application will never be stable if you start any kind of recurrent asynchronous task when the application starts (for example for a polling process, started with a setInterval, a setTimeout or using RxJS operators like interval);

I know the pace-js source code has setInterval and setTimeout in it, so it's probably related somehow, I don't know. Any ideas how to resolve this? And why only Firefox seems affected?

Tested with:

• Angular v13.3.0
• Firefox v105.0.1 (64-bit)
• pace-js v1.2.4

[BlairMcClelland]

We've had reports of something that sounds very similar, with AngularJS and an older version of Pace After seeing this and digging around in Pace.sources and seeing it was Pace.sources[3] that was just sitting at 20% I added eventLag: false to Pace.options and Firefox looks to be loading without issue now. Of course I now have to dig into what changing that might break..

Edit - setting lagThreshold looks like the optimal change https://github.com/CodeByZach/pace/issues/62#issuecomment-29265032

[dstj]

@BlairMcClelland Thanks for the information. I looked at the linked comment and tried to play with eventLag.lagTreshold. Adding this code to main.ts seems to work (though I have no idea about any possible side-effect of changing eventLag.lagThreshold).

declare var Pace: any;
Pace.options.eventLag.lagThreshold = 12;

Note:

• Pace.options.eventLag.lagThreshold = 10; does NOT work
• Pace.options.eventLag.lagThreshold = 11 works, but much slower than 12