bug: Specifying provideIonicAngular() in a route provider prevents hydration from completing about ionic-framework

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