bug: Specifying provideIonicAngular() in a route provider prevents hydration from completing

[dexster]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

Specifying provideIonicAngular() in a route provider prevents the hydration from completing successfully

The CSS display property does not update

html:not(.hydrated) body {
display: none;
}

Expected Behavior

When providing provideIonicAngular() in the bootstrap config it works as expected:

html.ion-ce body {
display: block;
}
html:not(.hydrated) body {
display: none;
}

Steps to Reproduce

Use the reproduction url below.
Open main.ts
Inspect the body tag to see the issue.
Uncomment the line and the display works as expected

Code Reproduction URL

https://stackblitz.com/edit/angular-pmvzjr?file=src%2Fmain.ts,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fexample.component.html

Ionic Info

Ionic:

Ionic CLI : 7.2.0

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v20.9.0
npm : 10.1.0
OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. provideIonicAngular relies on the Angular standalone bundle of Ionic which does not use hydration. Your application is also loading code from the hydrated version of Ionic which is why it is expecting hydration to complete. As mentioned in the documentation, your application should not mix imports from @ionic/angular and @ionic/angular/standalone as they use 2 different build systems.

To fix this, your application should either use @ionic/angular (hydrated bundle) imports or @ionic/angular/standalone (standalone bundle) imports, but not both.

[dexster]

@liamdebeasi I have fixed the repro to only use standalone and it still does not show anything when provided in the route provider. The issue may be different from the original hydration issue mentioned
https://stackblitz.com/edit/angular-pmvzjr?file=src%2Fmain.ts,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fapp.component.html

[liamdebeasi]

provideIonicAngular should be set on the root provider. It does not need to be provided individually to each component in the routing definition.

[dexster]

My use-case is for micro-frontends where each remote is responsible for its own providers and the shell application should not have to add root providers for the remote applications in it.

[liamdebeasi]

You'll want to make sure that the provideIonicAngular is added to the main.ts file in the remote application in that case. provideIonicAngular allows you to set a global config, so it needs to be set globally in the context of a single application.

I'm assuming here that the remote application is a complete Angular application instead of a single component.

[dexster]

It is built as a complete Angular application, so it does have main.ts and root providers when running as a standalone app.

When it is integrated inside a host app as a micro-front-end remote, the remotes main.ts and root providers are bypassed and the host loads an entry point to the remote, which is the routes file containing the initial route the host must navigate to. This route needs to provide all the providers that the remote requires.

As a workaround, I am including the Ionic provider in the host app but this means that Ionic is loaded even if users do not navigate to the remote.

[ionitron-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.