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