feat: Support SSR Hydration for Ionic Angular

[tuhinkole]

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.

Describe the Feature Request

Enable Server-Side Rendering (SSR) hydration for Ionic components (Stencil-based Web Components) when used in Angular projects.

While Ionic supports SSR at a static HTML level, components fail to hydrate on the client-side when served via Angular SSR, resulting in broken UI behavior and loss of interactivity.

Stencil (used under the hood by Ionic) supports hydration in React and Vue, but SSR hydration is currently not supported for Angular.

Describe the Use Case

We're using Ionic Framework with Angular (v8+ and Angular 17/18+) to build SEO-friendly, performance-oriented applications. Our apps require SSR to:

Improve SEO

Enhance first paint performance

Support accessibility and better crawlability

However, when using Angular Universal, Ionic components (e.g., , ) render HTML on the server, but fail to hydrate on the client. This results in:

No Shadow DOM or styling

Missing interactivity (clicks, gestures)

Unusable or broken UI

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[christian-bromann]

Thanks for raising the issue @tuhinkole!

We would love to have support for SSR in Angular. I will probably not be able to deliver that given my limited experience with Angular but would help anyone who takes this on and wants to contribute a PR for it.