ActivatedRoute is not updated correctly when using ion-router-outlet

[hakimio]

Bug Report

Ionic version:
4.0.0-rc.0

Current behavior:
Getting correct activated route using Angular ActivatedRoute service only works the first time when "ion-router-outlet" is used and router NavigationEnd event occurs.

Expected behavior:
Getting correct activated route using Angular ActivatedRoute service works every time NavigationEnd event occurs and "ion-router-outlet" is used.

Steps to reproduce:
Try to get activated route every time Angular router fires NavigationEnd event.

Related code:
Following code correctly returns data object of the activated route when Angular "router-outlet" is used but only works the first time when Ionic "ion-router-outlet" is used:

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {filter, map, mergeMap} from 'rxjs/operators';

@Component({
 selector: 'app-foo',
 templateUrl: './foo.component.html',
 styleUrls: ['./foo.component.scss']
})
export class FooComponent implements OnInit {

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

 ngOnInit() {
 this.router.events
 .pipe(
 filter((event) => event instanceof NavigationEnd),
 map(() => this.activatedRoute),
 map((route) => {
 while (route.firstChild) {
 route = route.firstChild;
 }
 return route;
 }),
 mergeMap((route) => route.data)
 )
 .subscribe(
 (routeData) => {
 console.log(routeData);
 }
 );
 }

}

Other information:
daem0ndev explains the issue quite well in this comment.
This issue is quite important and it should be blocker for stable version 4 release.

As a workaround "IonicRouteStrategy" can be removed from app module providers until the issue is fixed.

Related issues:
ActivatedRoute.queryParams break after navigation
StackController Page reuse uses old Page data

Ionic info:

Ionic:

 ionic (Ionic CLI) : 4.6.0
 Ionic Framework : @ionic/angular 4.0.0-rc.0
 @angular-devkit/build-angular : 0.11.4
 @angular-devkit/schematics : 7.1.4
 @angular/cli : 7.1.4
 @ionic/angular-toolkit : 1.2.2

System:

 NodeJS : v10.1.0 (C:\Program Files\nodejs\node.exe)
 npm : 6.5.0
 OS : Windows 10

[naturalfreak]

Same here, after reloading the page ( cntrl + r ) this.ActivatedRoute.queryParams.subscribe is fired, but when I change queryparams nothing happens. If I load application on the main page for example my route is '/' and navigate to route with query params for example /category/:id?page=1, this.ActivatedRoute.queryParams.subscribe is working fine and I receive information when change query param page to 2.

import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ProductService } from '../../../providers/ProductService';
import { CategoryService } from '../../../providers/CategoryService';
import { map } from 'rxjs/operators';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
 selector: 'category-component',
 templateUrl: 'index.html',
 styleUrls: ['style.scss'],
 changeDetection: ChangeDetectionStrategy.OnPush
})

export class Category implements OnInit{


 sort: any;
 category: any;

 products = [];
 sortBy = 'По подразбиране';
 loaded = false;
 limit = 20;
 page = 1;

 selectedFilters = {
 filters: [],
 promotion: false,
 stock: false
 };

 @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

 constructor(
 private ActivatedRoute: ActivatedRoute,
 private Router: Router,
 private ChangeDetectorRef: ChangeDetectorRef,
 private ProductService: ProductService,
 private CategoryService: CategoryService
 ) {

 }

 ngOnInit() {
 const { id } = this.ActivatedRoute.snapshot.params;

 if (id) {
 this.CategoryService.get(id).subscribe((res) => {
 this.category = res;
 this.ChangeDetectorRef.markForCheck();
 });
 }

 this.ActivatedRoute.queryParams.subscribe((params) => {

 console.log(params)

 const page = Number(params.page) - 1;

 this.sort = {
 'limit': this.limit,
 'skip': this.limit * page,
 'sortKey': 'created_at',
 'sort': -1,
 'match': { 'category_id': id }
 }

 this.onLoadProducts().subscribe();

 });
 }

 onLoadProducts() {
 return this.ProductService.getByCriteriaWithPriority(this.sort).pipe(map((res: any) => {

 res.forEach(element => {
 this.products.push(element);
 });

 if (res.length < this.limit) {
 this.loaded = true;
 this.infiniteScroll.disabled = true;;
 }

 this.infiniteScroll.complete();
 this.ChangeDetectorRef.markForCheck();

 return res;
 }));
 }

 loadData() {
 if (!this.loaded) {

 this.page++;

 this.Router.navigate(
 [],
 {
 relativeTo: this.ActivatedRoute,
 queryParams: { page: this.page },
 queryParamsHandling: "merge"
 });

 }
 }

 goBack() {
 this.page = 1;
 this.products = [];
 this.Router.navigate(
 [],
 {
 relativeTo: this.ActivatedRoute,
 queryParams: { page: this.page },
 queryParamsHandling: "merge"
 });
 }

}

[lincolnthree]

This is still a problem in 4.0.1.

[abierbaum]

This is still a problem and is causing all of my relative navigation links to fail.

[nathan-torquato]

Same thing here, @abierbaum .
In our case, disabling { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } did the trick, but I think the problem deserves some deep investigation.

[liamdebeasi]

Hi there,

There is a PR up that should address several of the routing/caching issues we've been seeing: #17888

Would someone be able to try this PR out in one of their projects and provide some feedback on whether or not this resolves your issue?

Thanks!

[mhartington]

Hey everyone. We just merged in #17888 which fixes this. Thanks for all your patience here 😄

[hakimio]

@mhartington It's not fixed. Run the example code I provided to test with "IonicRouteStrategy" and "ion-tabs" layout.

[liamdebeasi]

Hi @hakimio,

Are you testing this with Ionic 4.2? If the issue is still happening, can you provide a repository with the code required to reproduce this issue?

Thanks!

[hakimio]

@liamdebeasi Yes, 4.2. Code is provided above (first message). You just need to use it with IonicRouteStrategy and "ion-tabs".