Router link shows an empty page with routerDirection="forward"

I have some ion cards in my app home page which load relevant pages upon clicked.

<ion-card [routerLink]="['/page-one']" routerDirection="forward">
                        ...
                        ...
</ion-card>

When I click on a card, the app loads a blank white page. But all the services underneath works. It just does not show the html content.

But if I reload the page in browser, it starts showing.

One thing I noticed is, when the routerDirection is set to root, it works fine.

What could be the issue here?

Following is my ionic info.

Ionic:

   Ionic CLI                     : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.2

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.0.0 (/home/viraj/.nvm/versions/node/v14.0.0/bin/node)
   npm    : 6.14.4
   OS     : Linux 4.15

Do you have a demo/sample we can look at? Kind of hard to know what the issue is without one

Hello, Thank you for your kind concern. It turned out that I have copied a style that I had put on .can-go-back class to control the visibility of back button from home styles to global.scss.

Sorry for the trouble :slight_smile:

1 Like