Ionic 4 setRoot with Angular Router

angular typescript ionic-framework ionic4
Riccardo picture Riccardo · Aug 4, 2018 · Viewed 24.6k times · Source

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?

Answer

Elvis Fernandes picture Elvis Fernandes · Aug 9, 2018

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.

Related questions

Ionic 5 with Angular 9 - Angular JIT compilation failed: '@angular/compiler' not loaded

Ionic 5 was announced a few hours ago (12th Feb 2020) and I upgraded my one of the small production app to Ionic 5 along with Angular 9: # To update to Ionic 5 npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save-exact --save # To update …

Read More
ionic 4: changing ion-content background does not work

i have tried in global.scss as ion-content{ background-image: url('assets/images/cover.jpg'); -webkit-background-image: url('assets/images/cover.jpg'); background-repeat: no-repeat; background-size:cover; } but this does not render the image. tried path as ./assets/images/cover.jpg as well. …

Read More
Ionic 4 custom components

How do you load a component in ionic 4 after running the command ionic g component myComponent? I want to add a new generated custom component to my home page.

Read More