ionic-team / ionic-team/ionic-framework

bug: Error during routing prevents subsequent attempts to navigate; multiple Pages on screen

Ouverte
#21,879 1 commentaire 3 réactions 0 personnes assignées Voir sur GitHub
package: angular type: bug
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

# Bug Report

**Ionic version:**

[ ] **4.x**
[x] **5.x**

**Current behavior:**

If an unhandled error occurs during routing (such as when leaving a Page), the navigation transition will not complete and subsequent attempts at routing will not render the Page correctly. You end up seeing parts of multiple Pages at the same time, and you can see them rendered outside of the `ion-router-outlet` in the DOM.

**Expected behavior:**

I would expect that navigation transitions themselves would still complete even if there's an unhandled error in a Page/Component that may cause an issue for that particular Page/Component. I'd expect the router/router outlet to complete navigating to the Page by updating the URL and placing the Page in the `ion-router-outlet`.

**Steps to reproduce:**

1. Clone the repo here: https://github.com/KevinKelchen/ionic-routing-error
2. Run `npx ionic serve`
3. On the menu on the left, click on any menu items except `Trash`. The Page on the right should render these correctly.
4. Now click `Trash`. Then click a different menu item. You'll see an error in the console that is hard-coded and is thrown in `FolderPage`'s `ngOnDestroy`.
5. Continue clicking on non-`Trash` menu items. You'll start to see multiple Pages on the screen that failed to load. In the DOM you'll see the failed Pages sibling to `ion-router-outlet`.

**Related code:**

Clone this repo: https://github.com/KevinKelchen/ionic-routing-error
Follow the *Steps to reproduce*.

**Other information:**

**Ionic info:**

```
Ionic:

Ionic CLI : 5.4.16 (/Users/kelchen/.npm/_npx/44708/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.3.1
@angular-devkit/build-angular : 0.901.12
@angular-devkit/schematics : 9.1.12
@angular/cli : 9.1.12
@ionic/angular-toolkit : 2.3.0

Utility:

cordova-res : not installed
native-run (update available: 1.0.0) : 0.2.9

System:

NodeJS : v12.18.0 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Catalina
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Start by cloning the linked ionic-routing-error repository and reproducing the failure with `npx ionic serve`, especially the error thrown by `FolderPage` in `ngOnDestroy`. Then inspect the routing and `ion-router-outlet` behavior involved in the failed transition. Done means subsequent navigation updates the URL and keeps each Page inside the `ion-router-outlet` without multiple Pages remaining on screen.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.