Navigation to sibling route fails after several successful page switches

[verylongword]

Bug Report

Ionic version: 4.10.3

Current behavior: Navigation to child of data-parameterised route succeeds at first, but then fails after navigating back and forth several times between sibling routes: (home.page -> usage.page -> payments.page -> usage.page ->payments.page FAILS: page is stuck on usage.page, except that the back-button still works)

Expected behavior: Navigation back and forth between sibling routes should always succeed.

Steps to reproduce: I have a simple test example web-app in Visual Studio Code which I am happy to supply, but StackBlitz says it does not support some of the file types yet. I don't know how else to show you.

File structure: src/app/home/ src/app/payments/ src/app/usage/*

Related code:

app-routing.module.ts:

import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; import { ReactiveFormsModule } from '@angular/forms';

const routes: Routes = [{ path: '', redirectTo: 'home', pathMatch: 'full' },{ path: 'home', loadChildren: './home/home.module#HomePageModule' },{ path: 'accounts/:d/usage', loadChildren: './usage/usage.module#UsagePageModule' },{ path: 'accounts/:d/payments', loadChildren: './payments/payments.module#PaymentsPageModule' }]; @NgModule({ imports: [ ReactiveFormsModule, RouterModule.forRoot(routes, { enableTracing: true, // <-- debugging only initialNavigation: true, relativeLinkResolution: 'corrected' // Fix Router BUG } )], exports: [RouterModule] }) export class AppRoutingModule {}

================= home.page.html:

home Go To Accounts/:data/usage

================= home.page.ts:

import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router';

@Component({ selector: 'app-home', templateUrl: './home.page.html', styleUrls: ['./home.page.scss'], }) export class HomePage {

constructor( private route: ActivatedRoute, private router: Router) { }

public goToAccounts(){

const url =  '/accounts/1234567891bcdefghijklmnopqrstuvwxyz/usage';
console.log( 'HOME goToAccounts( usage ): url = '+ url);
this.router.navigateByUrl( url );

} }

================= usage.page.html:

Usage Go To Accounts/:data/payments

================= usage.page.ts:

import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router';

@Component({ selector: 'app-usage', templateUrl: 'usage.page.html', styleUrls: ['usage.page.scss'] }) export class UsagePage { constructor( private route: ActivatedRoute, private router: Router) { }

public goToAccounts(){

console.log( 'USAGE goToAccounts( payments ): url = '+ this.router.url);
this.router.navigate( ['../payments'], {relativeTo: this.route} );

}

}

payments.page.html:

Payments Go To Accounts/:data/usage

================= payments.page.ts:

import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router';

@Component({ selector: 'app-payments', templateUrl: 'payments.page.html', styleUrls: ['payments.page.scss'] }) export class PaymentsPage { constructor( private route: ActivatedRoute, private router: Router) { }

public goToAccounts(){

console.log( 'PAYMENTS goToAccounts( usage ): url = '+ this.router.url);
this.router.navigate( ['../usage'], {relativeTo: this.route}  );

}

}

Other information:

Ionic info:

Ionic:

ionic (Ionic CLI) : 4.10.3 (C:\Users\Don\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 4.0.2 @angular-devkit/build-angular : 0.12.4 @angular-devkit/schematics : 7.2.4 @angular/cli : 7.2.4 @ionic/angular-toolkit : 1.4.0

Capacitor:

capacitor (Capacitor CLI) : 1.0.0-beta.17 @capacitor/core : 1.0.0-beta.17

System:

NodeJS : v10.15.1 (C:\ProgramFiles\nodejs\node.exe) npm : 6.4.1 OS : Windows 8.1

[liamdebeasi]

Hi there,

Thanks for opening an issue with us! Would you be able to provide a repository with the code required to reproduce this issue?

Thanks!

[verylongword]

code required to reproduce this issue at:

https://github.com/verylongword/ionic4-angular-tests/tree/master/test-sibling-navigation

[liamdebeasi]

Thanks for the report. I can reproduce this issue using the provided repo on the installed version of Ionic (v4.0.1). However, I am not able to reproduce this issue on later versions of Ionic, so this appears to have been resolved.

I am going to close this, but if you are still running into problems feel free to open a new issue with a reproduction.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.