Ionic 4 rendering after navigate not working

#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.

1 Like
#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.