Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hakimio opened this issue Jan 4, 2019 · 18 comments

Comments

9 participants
@hakimio
Copy link

commented Jan 4, 2019

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

This comment has been minimized.

Copy link

commented Jan 30, 2019

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 comment has been minimized.

Copy link

commented Feb 15, 2019

This is still a problem in 4.0.1.

@abierbaum

This comment has been minimized.

Copy link

commented Feb 27, 2019

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

@torquato-nathan

This comment has been minimized.

Copy link

commented Mar 19, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 27, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 29, 2019

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

@liamdebeasi liamdebeasi added this to Backlog 🤖 in Ionic Core via automation Mar 29, 2019

@liamdebeasi liamdebeasi moved this from Backlog 🤖 to Done 🎉 in Ionic Core Mar 29, 2019

@hakimio

This comment has been minimized.

Copy link
Author

commented Apr 4, 2019

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

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 4, 2019

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

This comment has been minimized.

Copy link
Author

commented Apr 4, 2019

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

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 4, 2019

Hi there,

Can you be more specific? Where do you intend the code you provided above to go? What steps do I need to take to reproduce this issue?

Thanks!

@hakimio

This comment has been minimized.

Copy link
Author

commented Apr 4, 2019

I have provided you the whole component class in the first post (same component used in multiple ionic tabs). Copy-paste the code and see if router NavigationEnd event is triggered when switching from one ionic tab to another and IonicRouteStrategy is used.
All the steps to reproduce are clearly described in the first post.

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 4, 2019

Hi there,

I am testing this on Ionic 4.2 and everything seems to be working correctly. Clicking on tab 2 shows the proper data for tab 2 and clicking back on tab 1 shows the proper data for tab 1.

I compared to Ionic 4.1 and clicking on tab 2 is showing data for tab 1.

Can you verify this on your end?

Thanks!

@hakimio

This comment has been minimized.

Copy link
Author

commented Apr 4, 2019

Can I simply email sample project to you?

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 4, 2019

Sure. You can attach a .zip here or shoot an email over to liam@ionic.io.

Thanks!

@hakimio

This comment has been minimized.

Copy link
Author

commented Apr 4, 2019

I've send you an email. Let me know if you can reproduce.

@hakimio

This comment has been minimized.

Copy link
Author

commented Apr 5, 2019

@liamdebeasi Did you manage to reproduce?

@maxtacco

This comment has been minimized.

Copy link

commented Apr 5, 2019

We still experiencing this issue after 4.2 update.

@ionitron-bot

This comment has been minimized.

Copy link

commented May 5, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 5, 2019

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.