search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.97k stars 13.52k forks source link

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

Open KevinKelchen opened 4 years ago

KevinKelchen commented 4 years ago

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
arb362 commented 2 years ago

Interestingly enough, I just ran into this problem. Thanks for your bug report so that I could fix it :)