Ionic 4 setRoot with Angular Router Ionic 4 setRoot with Angular Router typescript typescript

Ionic 4 setRoot with Angular Router


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.


With @angular/router one way to achieve the behavior that you expect is by using replaceUrl and skipLocationChange of the NavigationExtras here on official docsThe 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


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

this.navCtrl.navigateRoot('/pageName');