[SOLVED] - Updating the url when pushing page on the nav stack

Ionic Framework ionic-v3
5

@alexthebuilder, This SO article was the most helpful with what I was trying to do: http://stackoverflow.com/questions/38131293/angular-2-router-navigate.

I wanted to avoid having to deal with router children, so I was able to keep my routing structure mostly the same as what I used on ionic2 beta 6. Notable changes include ‘name’ attribute no longer being used and route params passed as an array instead of a dictionary.

I also had to use a <router-outlet> element in the app.component.html template.

As for bootstrapping the route configuration; see below:

import {Injectable} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

@Injectable()
export class RouteConfigurator{
    constructor() { }

    static get routeConfig(): Routes {
        return [your routes]
    }
}

export const APP_ROUTES_PROVIDER = RouterModule.forRoot(RouteConfigurator.routeConfig(), {useHash: false});

In app.module.ts, import the APP_ROUTES_PROVIDER and add it to the @NgModule imports collection, like below:

@NgModule({
    declarations: [
        MyApp,
    ],
    imports: [
        APP_ROUTES_PROVIDER,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp
    ],
    providers: [
        {provide: APP_BASE_HREF, useValue: "/m"},
        {provide: LocationStrategy, useClass: PathLocationStrategy}
    ]
})
export class AppModule {}

Given all this, the nav stack doesn’t appear to be updated with the pages since they aren’t being pushed onto it (in beta 6, this wasn’t the case, pages were pushed onto the nav stack even though I was using the router).

Hope this helps.

Thanks,
D