Strange Routing Issue Angular 7 + Ionic 4 Beta

Question

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 has 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 things are now really strange!

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 ?

Answer 1

So looks like this was down to the following line

import "~@ionic/angular/css/core.css";

missing in the global.scss

Render not working after Navigate Ionic 4