Skip to content

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

@SebastianKohler

Description

@SebastianKohler

Prerequisites

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions