Ionic 4 Angular Routing previous button issue


I am upgrading my Ionic 3 app to ionic 4 using Angular. Its a book for children with various chapters navigating through Previous and Next Arrows.

Here is my environment details

   ionic (Ionic CLI)             : 4.11.0 
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0


   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-i                                                                                                                onic-webview 4.1.1, (and 9 other plugins)


   NodeJS : v10.16.3 
   npm    : 6.9.0
   OS     : Windows 7

I have been using NavController’s navigateForward and navigateBack options in my controllers to do it like this

this.nav.navigateForward('/ch', {queryParams:{chname:chslug}}) 

this.nav.navigateBack('/ch', {queryParams:{chname:chslug}})

Its working fine in Ionic 3 However in Ionic 4 its not working, i am using new Angular Routing and for this i am using below code


It’s working fine when i click on next arrow however clicking on previous, its not working and showing nothing/blank.

I have googled and found few things but its not working. One of them as below using old navcontroller’s SetDirection() function in component like this



Its still not working as expected.

Please anyone can help me to sort this issue, i am trying to resolve this issue for hours now.


Can anyone please help me with this?