21

I'm upgrading my Ionic 3 project to the latest Ionic 4 and I have some trouble with Routing. In Ionic 3 I used setRoot just like this: 

handler: () => navCtrl.parent.parent.setRoot(HomePage, 'logout', {animate: true})

The latest navCtrl of Ionic 4 has only goBack, goForward and goRoot, and I don't understand how to use parent. I found ActivatedRoute in Angular, but I don't think this is the right way. How can I do?

Riccardo
  • 233
  • 1
  • 3
  • 8

5 Answers5

26

Generally speaking, and citing this awesome article on this matter by Josh Morony:

In Ionic 4 with Angular routing, there is no root page to be defined.

Because Ionic 4 relies on Angular's router, the NavController has been changed to reflect this new reality, and for an Angular application there is no such a thing like "root" route. You simply transition between routes and the framework does the rest of the work.

Generally speaking, the methods navigateRoot, navigateBackward and navigateForward are here only to instruct Ionic on how to deal with animations. So you can use navigateRoot in Ionic 4 to accomplish the same of what you used setRoot on Ionic 3.

I strongly recommend that you read the aforementioned article, it covers a lot of what you need to know to migrate your routes from version 3 to version 4 of Ionic.

rtpHarry
  • 13,019
  • 4
  • 43
  • 64
Elvis Fernandes
  • 1,108
  • 10
  • 21
  • 5
    correct answer, but nice to mention that the methods got replaced by `navigateForward()`, `navigateBack()`, `navigateRoot()` https://github.com/ionic-team/ionic/releases/tag/v4.0.0-beta.5 – Gary Klasen Aug 28 '18 at 20:04
21

With @angular/router one way to achieve the behavior that you expect is by using replaceUrl and skipLocationChange of the NavigationExtras here on official docs The code would something like this:

this.router.navigate([pageLink], {replaceUrl: true})

But yes, the referred navigateRoot doesnt exist on @angular/router as it was on ionic 3

Igor
  • 804
  • 10
  • 23
  • 1
    I think this is a good answer, because you can rely on Angular's router but still set the root as before. This is especially important if you use an ion-menu! – andreas Jun 14 '19 at 22:23
  • I believe this is what OP needed and should be accepted answer – Cedric Ipkiss Jan 24 '21 at 12:02
6

To make your page set to the root page in Ionic 4 you should use navigateRoot instead of setRoot

this.navCtrl.navigateRoot('/pageName');
Tahseen Quraishi
  • 1,353
  • 1
  • 14
  • 16
  • 1
    Thanx @Tahseen. The only solution that worked if application was started from nested router outlet. Angular routing simply refused to manage cached ionic outlets. And yes, ionic documentation is worth looking at in the most basic cases, a bit more than basic - check actual classes. – Den Mar 02 '20 at 15:47
3

You can setRoot without using angular's router. This code works in Ionic 4

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) { 

}

navigateRoot()

navigateRoot(url: string | UrlTree | any[], options?: NavigationOptions): Promise;

 this.navCtrl.navigateRoot('/app/profile');

or if you want forward/back animation:

this.navCtrl.navigateRoot('/authentication', { animationDirection: 'forward' });

setDirection() with angular's router

setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back'): void;

with navigate:

this.navCtrl.setDirection('root');
this.router.navigate(['/app/profile']);

with navigateByUrl:

this.navCtrl.setDirection('root');
this.router.navigateByUrl('/app/profile');

or using directive:

<a routerLink="/app/profile" routerDirection="root">Proceed</a>
Snowbases
  • 2,316
  • 2
  • 20
  • 26
0

In Iocin 5 with Angular

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

@Component({
  ...
})
export class LoginComponent {

  constructor(private router: Router){}

  navigate(){
    this.router.navigate(['/detail'])
  }
}
Sandy
  • 325
  • 1
  • 9
  • 18