Skip to content

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

@dstj

Description

@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 **********

  1. Add pace-js to the appliation: run ng add pace-js
  2. Modify angular.json to include the pace-js script:
            "scripts": [
              "node_modules/pace-js/pace.min.js"
            ]
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions