Ionic 4 Angular Routing previous button issue

Hi,

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 (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)

System:

   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

this.router.navigate(['/ch',{chname:chslug}]);

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

if(direction=='forward')
	  {
		  this.navCTRL.setDirection('forward');
	  }else
	  {
		this.navCTRL.setDirection('back');  
		}

this.router.navigate(['/ch',{chname:chslug}]);

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.

Thanks,
Zack

Can anyone please help me with this?