Ionic 4 routing with angular 6

Question

Im trying to update a legacy ionic app to v4 at the moment but cant seem to find a v4 equivalent to this navigation

     return this.app.getRootNav().setPages([
         {page: Profile},
         {page: SettingsPage, params: {id: userId}}
     ])

Answer 1

Ionic4 and angular version of your request is like this :

this.router
  .navigate(["/page1"], { replaceUrl: true })
  .then(() => this.router.navigate(["/page2"]));

The logic is here as i understand. Push page1 into history but navigate to page2 so if user pushes the back button it redirects to page1. Here is the stackblitz sample.

Answer 2

Sorry I read your question too late (just today), but to be able to find the best answer for your question I recommend you take a look at Ionic 4 Routes to find the best solution for you and since I had no enough time to go deeper to find the optimal solution then I will try to describe how I think it should be achieved and then you seek the optimal method to do it:

If I get your question then all you need is to get benefit of the new Ionic navigation control method which is called "Routes"

when you need to specify the order of your navigation stack to hold the following order Profile->SettingPage so settings page on top and you can navigate back to Profile then instead of doing this like:

return this.app.getRootNav().setPages([
    {page: Profile},
    {page: SettingsPage, params: {id: userId}}
])

you can simply:

show your page SettingsPage with the required parameters as a root page by using something like this (assuming SettingsPage route path is "settings"):

inside your app-routing.module.ts:

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
    { path: 'profile', loadChildren: './pages/profile/profile.module#ProfilePageModule' },
    { path: 'settings/:id', loadChildren: './pages/settings/settings.module#SettingsPageModule' }
];

and your button that should navigate to the SettingsPage should be something like this (notice routerDirection="root" which will show your page as a root page that would help you get benefit of another attribute which is the defaultHref):

<ion-button
  expand="block"
  [routerLink]="['/settings/', userId]"
  routerDirection="root"
></ion-button>

at your /settings page to navigate back to your profile page you can use the "defaultHref" attribute which will define the previous page in the navigation stack when nothing else in the stack exists (which is guaranteed because we set the page as a root page). This back button should look something like this:

<ion-toolbar color="primary">
    <ion-buttons slot="start">
        <ion-back-button defaultHref="/profile"></ion-back-button>
    </ion-buttons>
    <ion-title>Profile</ion-title>
</ion-toolbar>

you can notice at route you think it the inverse way (you first put yourself in the required page and then define the default page that should show when you navigate back.

I don't know if that is exactly what you need but that at least what I have understood from your question and that is the "routes" way to do it.