Ionic 4 rendering after navigate not working

Ionic Framework
1

I have an Ionic 4 beta app + Angular 7.

It has just been updated from Ionic 4 beta 3 to beta 21 + Angular 6 to Angular 7.1.3.

Since the update none of my routing is working, the url in the address bar changes but the page does not update.

I can see that NavController had been deprecated so I have updated my code to use the built in angular router instead of the NavController but I still have the same issue.

I have added tracing to my routing config

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

And the tracing shows that the routing is all working as expected, and after some debugging I can even see that the constructor of the components I am navigating to, are also executing.

So I looked at the DOM and thing are now really strange.

enter image description here

The component highlighted in blue is the component I navigated to. It is all rendered correctly just not visible. If I edit the DOM and delete the <app-cases> the previous component, then my <app-case> component shows correctly.

So it seems the hiding and showing of the next component is not working correctly.

Anyone have any ideas ?

1 Like
2

I’ve also been looking for a solution to this for a week now.

3

I am glad I’m not the only one experiencing this! I created this almost identical stackoverflow post

https://stackoverflow.com/questions/53747808/strange-routing-issue-angular-7-ionic-4-beta.

If you could comment on there and upvote the question, would be good as It has more users and might spark some more interest.

1 Like
5

I noticed that in my global.scss file I had previously commented out the @import "~@ionic/angular/css/core.css"; line. Uncommenting this line fixed the problem for me.

2 Likes
6

Thanks it solve the problem

I noticed that in my global.scss file I had previously commented out the @import "~@ionic/angular/css/core.css"; line. Uncommenting this line fixed the problem for me.

7

This solved the problem for me too, thanks!

8

I’m having the same issue… and my "~@ionic/angular/css/core.css" is not commented out. It seems this is not a universal solution to this issue.

In my case… navigation fails on login but if i logout and login again… it works…

My ionic info is as follows:

Ionic CLI                     : 6.10.1
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.901.11
   @angular-devkit/schematics    : 9.1.11
   @angular/cli                  : 9.1.11
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.3.0
   @capacitor/core : 2.3.0

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v12.18.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.5
   OS     : Windows 10