Imports: [IonicModule] in app.component.ts suddenly shows white blank screen

Ionic Framework Ionic Angular
1

I am facing a problem in Ionic/Angular(standalone) app….when I do “ionic serve”…everything is working fine in browsers. But when I run in android emulator (API 36, API 33) … all I see is blank white screen. I traced back the problem to this import in app.component.ts

@Component({
……
imports: [IonicModule]
…..
})

If I remove this import then the app starts in the emulator but no styling is applied to ion-content that I have in scss file like this:
ion-content::part(background){
background: #a02bec;
}

the weird thing is that in browsers with “ionic serve” everything works fine with or without that “IonicModule” import.

2

I removed imports: [ IonicModule ] from all my components and added imports: [ IonHeader, IonContent ….] for every component i am using…and things are working fine in Android emulator too.

I don’t know the reason but IonicModule should not be used with standalone components. However , imports: [FormsModule,CommonModule] are working fine.

4

Take a look at the Angular Standalone starter project. It imports IonApp.

5

@twestrick thank you so much….i will definitely take a look at this

1 Like