bug: angular: navigations that overlap a page transition can leave two pages visible

Offen
  • Stimmt etwas nicht?
#31,650 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
angular, typescript
Bereich
frontend

Rechercherichtung

Start in common/directives/navigation/stack-controller.ts, reading StackController.wait() and how runningTask is set and cleared; the issue already suggests tasks can resume concurrently via promise.finally(). Reproduce with the provided zoneless Angular app and the 8-navigation burst driver, checking visible .ion-page elements after settling. Done means overlapping navigations always settle with exactly one visible page matching the current URL, verified across repeated bursts.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

package: angular type: bug
Ionic Framework Version

v9.x (9.0.9)

Current Behavior

When router navigations follow each other faster than the page transition — a navigation starts while the previous transition is still animating — the outlet sometimes settles with two .ion-page elements displayed: the page for the current URL and a page from an earlier navigation.

In a headless Chromium run of the reproduction below (iOS mode, default transitions), 5 of 40 bursts of 8 navigations, 30–330 ms apart, ended with two pages visible.

From reading StackController.wait() (common/directives/navigation/stack-controller.ts): every task waiting on runningTask resumes at the same moment once it settles, and promise.finally(() => (this.runningTask = undefined)) can clear the slot while a later task is still running, so queued transitions can run at the same time rather than one after another. That does not seem to be the only path: with wait() changed locally to chain tasks strictly, 1 of 40 bursts still failed.

Expected Behavior

Once navigations settle, exactly one page is visible: the one for the current URL.

Steps to Reproduce
  1. A standalone Angular app with provideIonicAngular({ mode: 'ios' }), an <ion-router-outlet> and three sibling routes a, b, c, each a component with an <ion-content>.
  2. Call router.navigateByUrl() 8 times in a row to random routes among the three, 30–330 ms apart.
  3. Wait ~3 s and count the ion-router-outlet > .ion-page elements that are displayed with non-zero opacity.
const page = (name: string) => {
  @Component({ selector: `page-${name}`, template: `<ion-content>${name}</ion-content>`, imports: [IonContent] })
  class P {}
  return P;
};

@Component({ selector: 'app-root', template: '<ion-app><ion-router-outlet /></ion-app>', imports: [IonApp, IonRouterOutlet] })
class Root {}

bootstrapApplication(Root, {
  providers: [
    provideZonelessChangeDetection(),
    provideIonicAngular({ mode: 'ios' }),
    provideRouter([
      { path: 'a', component: page('a') },
      { path: 'b', component: page('b') },
      { path: 'c', component: page('c') },
      { path: '', redirectTo: 'a', pathMatch: 'full' },
    ]),
  ],
});

// Driver: navigate 8 times to random routes, 30–330 ms apart, then after ~3 s:
const visible = [...document.querySelectorAll('ion-router-outlet > .ion-page')]
  .filter((p) => getComputedStyle(p).display !== 'none' && +getComputedStyle(p).opacity > 0);
// Expected visible.length === 1; observed 2 in about 1 of 8 bursts.
Code Reproduction URL

Inline above.

Ionic Info

@ionic/angular 9.0.9, @ionic/core 9.0.9, @angular/core 22.2.3 (zoneless), Chromium via Playwright.

Additional Information

In our app this showed up as tab switches settling on a page that was not the tab in the URL after fast taps.

Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
3 T. 4 Std.
Gemergte PRs (30 T.)
72

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus ionic-team/ionic-framework

Alle Issues in ionic-team/ionic-framework

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.