fix(angular-server): fallback to scoped+annotations when SSR DOM lacks attachShadow by SebastianKohler · Pull Request #30967 · ionic-team/ionic-framework
Issue number: resolves #29751
What is the current behavior?
In Angular SSR environments using a server DOM that does not implement native attachShadow (for example Domino), Ionic server hydration can fail with:
TypeError: this.attachShadow is not a function
This occurs in the server hydrate path used by @ionic/angular-server when calling hydrateDocument(...) with the current default behavior.
What is the new behavior?
This PR adds a capability check in packages/angular-server/src/ionic-server-module.ts and applies a conditional fallback only when attachShadow is unavailable:
- if
attachShadowis supported:- keep existing behavior (
clientHydrateAnnotations: false)
- keep existing behavior (
- if
attachShadowis not supported:- use
serializeShadowRoot: 'scoped' - use
clientHydrateAnnotations: true
- use
This keeps the current behavior for environments with native attachShadow, while providing a compatible SSR path for Domino-like environments.
Does this introduce a breaking change?
- Yes
- No
Other information
The change is intentionally scoped to @ionic/angular-server integration logic and does not modify component behavior or the existing excludeComponents list.
I could not run the full Ionic test/lint suite locally in my current Windows environment setup, so this PR relies on CI for full validation.
Note: this PR addresses the attachShadow SSR crash path in @ionic/angular-server by applying a conditional fallback.
From upstream investigation, there is also a Stencil runtime fix in >= 4.40.0 related to non-shadow component patching (children/childNodes) that may affect Angular client hydration behavior. So full end-to-end resolution of all symptoms may also depend on the Stencil bump tracked separately.