bug: IonicModule should throw error if used in standalone

[Ookamini95]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Including IonicModule in a standalone page/component does not throw error.

Expected Behavior

Including IonicModule in a standalone page/component should throw error as it includes non standalone stuff and leads to UI breaking on mobile.

Steps to Reproduce

1. ionic g page pagename // in standalone: true project > Ionic CLI automatically includes IonicModules
2. Add enough text to scroll
3. Cannot scroll

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\Amministratore\AppData\Roaming\nvm\v20.10.0\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 7.6.5
@angular-devkit/build-angular : 17.1.0 @angular-devkit/schematics : 17.1.0 @angular/cli : 17.1.0 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.6.0 @capacitor/android : 5.6.0 @capacitor/core : 5.6.0 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 2.0.0

System:

NodeJS : v20.10.0 (C:\Program Files\nodejs\node.exe)
npm : 10.3.0 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. Can you clarify what your request is? You should be able to use IonicModule inside of an Angular standalone component. However, you cannot use IonicModule and Ionic standalone components in an Angular standalone component. Is this what you are referring to?

[Ookamini95]

Steps I did to reproduce the bug

• ionic start > angular > standalone
• go to homepage and swap IonHeader, IonToolbar, IonTitle, IonContent with IonicModule
• fill the page with lorems
• Cannot scroll (and UI breaks down) (only android, ionic serve works as expected)

I tried adding more pages, but as long the homepage has IonHeader, IonToolbar, IonTitle, IonContent it will work even if the new page uses IonicModule. It is a weird bug and tbf I'm not sure what exactly it's causing it.

[liamdebeasi]

The important thing here is developers cannot mix imports from @ionic/angular with @ionic/angular/standalone. This is noted in the documentation. So even though HomePage imports everything from @ionic/angular other places in your application (such as main.ts) likely import from @ionic/angular/standalone.

Since Angular CLI/Webpack handles the compilation of your application, Ionic does not have insight into which components you are importing from.

However, if you are using VSCode you can update the VSCode settings to never recommend imports from @ionic/angular or never recommend imports from @ionic/angular/standalone depending on your project setup.

[Ookamini95]

Thanks this solves it for me :)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.