-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Description
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
- Install the Angular CLI
- Create a new clean Angular app:
ng new testapp
- 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 **********'); }); }
- 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 **********
- Add
pace-js
to the appliation: runng add pace-js
- Modify
angular.json
to include the pace-js script:"scripts": [ "node_modules/pace-js/pace.min.js" ]
- 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