ionic-framework: [Ionic v4] Freezed navigation with children routes (with or wihout multiple nested ion-router-outlet)

Bug Report

Ionic Info

✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/Users/giacomocerquone/.nvm/versions/node/v10.3.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.12
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : 1.0.0

System:

   NodeJS : v10.3.0 (/Users/giacomocerquone/.nvm/versions/node/v10.3.0/bin/node)
   npm    : 6.4.0
   OS     : macOS High Sierra

Describe the Bug

This is an issue made to collect and further expand some of the weird behaviours of the new navigation system in ionic 4, that, I believe, are referable to this one bug. More precisely a bug in the ion-router-outlet component (or directive, as you wish). I took some time to shoot a little video where I explain the problem in detail, showing the code and the app running (sorry if it’s not up to the standards, but it’s my first video): https://youtu.be/q5lWTb1gT9k

Related Code There is this repo that you can examine: https://github.com/giacomocerquone/ionicv4-routing-bug.git

Expected Behavior That I could experience an usual angular navigation in my app.

Additional Context

This is, again, the video I made: https://youtu.be/q5lWTb1gT9k These are all the issues I could track down that are surely related to the same bug inside the outlet:

I’m doing this since I really hope to see this bug fixed that I find very critical. I’m about to ship a production app (to deliver for the next month) and I don’t know how to fix this situation.

If some of you knows a “quick fix” to apply in the meantime that they fix this problem, it’s all ears!!! Thanks so much everyone 😃

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 18
  • Comments: 17 (1 by maintainers)

Most upvoted comments

IMPORTANT: A quick fix I found is to use only absolute url when navigating. This can be painful since you have to re-take everytime any parameter in the url and pass it again, but at least in this way the app can work.

And please @louis-raine @sachst1000 remove +1 and “same issue” comments. If you have this problem too and have nothing to add, just put a thumb up! Thanks a lot 😃

This seems to work for me:

https://gist.github.com/TiVoMaker/825b48ed79f871adbf588eb27e59c126

Sadly this workaround doesn’t work if you have required parameters inside the url. Here’s a change I did to make it work in this case.

import { Injectable } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class FixRoute {
  constructor(private router: Router) {}

  navigate(
    paths: any[],
    extras: NavigationExtras = { skipLocationChange: false }
  ): Promise<boolean> {
    if (!extras.relativeTo) {
      return this.router.navigate(paths, extras);
    }

    const unmergedSegments = extras.relativeTo.snapshot.pathFromRoot
      .slice(1)
      .map(p => {
        return p.url.map(u => u.path);
      });
    const segments = [].concat(...unmergedSegments);
    paths.forEach(s => {
      if (typeof s === 'string') {
        const pathParts = s.split('/');
        pathParts.forEach(p => {
          if (p !== '..' && p !== '.') {
            segments.push(p);
          } else if (s !== '.') {
            segments.pop();
          }
        });
      }
    });

    extras = Object.assign({}, extras);
    delete extras.relativeTo;
    return this.router.navigate(segments, extras);
  }
}


Hi everyone,

This issue has been fixed with the release of Ionic 4.2.0. Please update to that version, and let me know if you are still experiencing any issues.

Thanks!

This still happens even with absolute urls especially when making use of back buttons and goBack() in rapid succession.