bug: `elm.attachShadow is not a function` TypeError in Angular SSR app since Ionic v8.2.4

[SebastianKohler]

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

v8.x

Current Behavior

Since v8.2.4 Ionic components like ion-button and ion-chip produce an elm.attachShadow is not a function TypeError in Angular apps with server side rendering (SSR) enabled.

The TypeError did not occur in version 8.2.2 and prior, but in every version since 8.2.4.

Expected Behavior

No TypeError like in v8.2.2 and prior.

Steps to Reproduce

See the code reproduction URL for a minimal app on GitHub showcasing the error (steps to run the app in the README).

The modules-based Angular app was generated with Angular CLI version 18.1.3 with the command:

ng new ionic-angular-ssr-attachShadow-typeError --ssr=true --standalone=false --style=scss

I then added @ionic/angular and @ionic/angular-server, configured Ionic and switched to Angular’s older browser builder which I’m using in my actual project (and as far as I know Ionic doesn’t work in Angular standalone SSR apps using the new Vite-based application builder). See the commit history in the code reproduction repository for a detailed account of the code changes.

Once you have the code reproduction app running you will get the TypeError in the terminal.

Code Reproduction URL

https://github.com/SebastianKohler/ionic-angular-ssr-attachShadow-typeError

Ionic Info

I don’t use the Ionic CLI. Here is the info from the Angular CLI:

Angular CLI: 18.1.3
Node: 20.12.1
Package Manager: npm 10.7.0
OS: win32 x64

Angular: 18.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1801.3
@angular-devkit/build-angular   18.1.3
@angular-devkit/core            18.1.3
@angular-devkit/schematics      18.1.3
@schematics/angular             18.1.3
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

Additional Information

No response

[crufter]

This is affecting us as well - SSR cannot render the site.

[AndrusGerman]

Same problem

[kafumanto]

Same problem here.

In addition, building the app catches the error also at compile time:

> ng build my-app --watch

TypeError: o.attachShadow is not a function
    at Mu (file:///[redacted]/.angular/prerender-root/d62c222d-bf22-49a2-84e2-4076e9839a1f/chunk-RESHKSIQ.mjs:2:26911)
[...]

EDIT: if helpful, here a more detailed stack-trace:

TypeError: elm.attachShadow is not a function
    at proxyHostElement ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:1993:15)
    at patchElement2 ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:2104:17)
    at patchChild2 ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:2110:13)
    at patchChild2 ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:2113:15)
    at patchChild2 ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:2113:15)
    at patchChild2 ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:2113:15)
    at patchChild2 ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:2113:15)
    at patchChild2 ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:2113:15)
    at hydrateApp ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:2144:9)
    at hydrateAppClosure ([redacted]\.angular\cache\18.2.9\[redacted]\vite\deps_ssr\@ionic_angular-server.js:30085:5)

Not sure if it's helpful, since the error looks like a compile-time error anyway: my root app component has host: { ngSkipHydration: 'true' }, and the error is reported at run-time inside the hydrateApp() function (that I suppose shouldn't be executed at runtime given the above setting).

[Watchwolf]

Same problem for me with the latest ionic version.

[davidquintard]

same problem

[davidquintard]

no workaround ?

[SebastianKohler]

My guess is that this originates from Stencil, and apparently the Ionic team is working on improving the Stencil SSR performance: https://ionic.io/blog/coming-soon-new-updates-features-for-ionics-open-source-projects

Let's hope the current Stencil work will fix this ...

[kafumanto]

I suspect that no one at Ionic has been looking into bug reports for a long time...

[crufter]

Probably not applicable to most but in my case the project is a website so I solved this by removing ionic and moving to angular material...

[davidquintard]

For my part, i downgraded to ionic 8.2.2. It works fine.

[Watchwolf]

I solved this by removing ssr. I have written a script to generate static page and redirect the search engine to them.

[SebastianKohler]

I also pinned version 8.2.2, which is fine for now. Thinking about moving to Angular Material, but it's so much work in the case of my project.

[SebastianKohler]

Still get the error in Ionic 8.6.0, though slightly different:

TypeError: this.attachShadow is not a function
    at ctor.createShadowRoot (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:180912)
    at proxyHostElement (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:241935)
    at patchElement2 (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:243771)
    at patchChild2 (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:243843)
    at patchChild2 (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:243933)
    at patchChild2 (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:243933)
    at patchChild2 (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:243933)
    at hydrateApp (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:246891)
    at hydrateAppClosure (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:1397098)
    at hydrateFactory (C:\Users\xxxxxx\GitHub\ionic-angular-ssr-attachShadow-typeError\dist\app\server\main.js:1:1397205)

[DavidBowdoin]

v8.2.2 was released a year ago and we have not been able to update since. I hope this does not mean ionic SSR is dead in the future? Does anyone know how to fix the ionic SSR code to work with @stencil/core > 4.20.0 I believe that is the root issue.

We depend on SSR (server side rendering) so we remain pinned "@ionic/angular": "8.2.2" and overrides: "@stencil/core": "4.20.0"