bug: Error with adoptedStyleSheets in Angular 18 and Ionic project

[papastepano]

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.

Ionic Framework Version

v8.x

Current Behavior

I'm encountering an error related to adoptedStyleSheets in my Angular 18 and Ionic project. The console shows the following error:
TypeError: Failed to set the 'adoptedStyleSheets' property on 'Document': Failed to convert value to 'CSSStyleSheet'.

Expected Behavior

The application should run without any errors related to adoptedStyleSheets.

Steps to Reproduce

1. Clone the repository: git clone https://github.com/papastepano/try-ionic
2. Install dependencies: npm install
3. Run the development server: ng serve
4. Open the application in a browser and check the console for the error.

Code Reproduction URL

https://github.com/papastepano/try-ionic

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\DELL\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.2.1
@angular-devkit/build-angular : 18.0.3
@angular-devkit/schematics : 18.0.3
@angular/cli : 18.0.3
@ionic/angular-toolkit : 11.0.1

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v20.11.0 (C:\Program Files\nodejs\node.exe)
npm : 10.4.0
OS : Windows 10

Additional Information

I suspect this might be due to browser compatibility or an issue with how CSSStyleSheet is being used in the project. Any insights or fixes would be appreciated.
Feel free to create a PR to the repo if you have a suggestion

[ConnorBrennan]

I am experiencing the same issue on Angular 15. While I can run my app successfully, attempting to run unit tests (jasmine/karma) results in the abovementioned error

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (C:\Users\505449\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.8.6 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@ionic\angular)
@angular-devkit/build-angular : 15.2.11 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@angular-devkit\build-angular)
@angular-devkit/schematics : 15.2.11 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@angular-devkit\schematics)
@angular/cli : 15.2.11 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@angular\cli)
@ionic/angular-toolkit : 11.0.1 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@ionic\angular-toolkit)

Capacitor:

Capacitor CLI : not installed
@capacitor/android : not installed
@capacitor/core : 5.4.0 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@capacitor\core)
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v22.1.0 (C:\Program Files\nodejs\node.exe)
npm : 10.7.0
OS : Windows 10

[ConnorBrennan]

I believe I have located the source of the issue. The version of stencil/core that ionic relies on appears to be the issue. Apparently this happens if you run the app in an iFrame (like when testing with karma), unclear if it is also the case in other situations.

For me, adding , "peerDependencies": { "@stencil/core": "4.18.1" } to my package.json fixed the issue.

It seems the issue first appears in @stencil/core 4.18.2

[papastepano]

Thank you @ConnorBrennan for confirming this issue. I would also like to ask if you could like the bug report so that it gets more attention. I can confirm that the proposed workaround prevents the error from occurring. I look forward to an official fix. I have the impression that Stencil, in general, is a huge blocker when it comes to keeping up with the latest Angular versions.

[Floscho2402]

I ran into a similar issue. After upgrading from ionic v7 to v8 some of my jest unit tests are broken:

TypeError: Cannot read properties of undefined (reading 'includes')

  at includes (node_modules/@stencil/core/internal/client/index.js:663:82)
  at addStyle (node_modules/@stencil/core/internal/client/index.js:674:20)
  at attachStyles (node_modules/@stencil/core/internal/client/index.js:1472:5)
  at updateComponent (node_modules/@stencil/core/internal/client/index.js:1462:38)
  at fn (node_modules/@stencil/core/internal/client/index.js:1464:88)
  at enqueue (node_modules/@stencil/core/internal/client/index.js:1462:10)
  at Array.dispatchHooks (node_modules/@stencil/core/internal/client/index.js:1426:26)
  at consume (node_modules/@stencil/core/internal/client/index.js:2990:16)
  at consume (node_modules/@stencil/core/internal/client/index.js:3032:5)
  at apply (node_modules/zone.js/bundles/zone.umd.js:1828:43)
  at _ZoneDelegate.apply [as invokeTask] (node_modules/zone.js/bundles/zone.umd.js:445:37)
  at ZoneImpl.invokeTask [as runTask] (node_modules/zone.js/bundles/zone.umd.js:195:51)
  at runTask (node_modules/zone.js/bundles/zone.umd.js:527:38)
  at call (node_modules/zone.js/bundles/zone.umd.js:516:52)
  at apply (node_modules/zone.js/bundles/zone.umd.js:1810:36)
  at invokeTheCallbackFunction (node_modules/jsdom/lib/jsdom/living/generated/Function.js:19:26)
  at runAnimationFrameCallbacks (node_modules/jsdom/lib/jsdom/browser/Window.js:603:13)
  at Timeout.<anonymous> (node_modules/jsdom/lib/jsdom/browser/Window.js:581:11)

The above mentioned Workaround with the older stencil Version 4.18.1 is fixing the issue for me.

I created a repository with code-example here: https://github.com/Floscho2402/ionic-8-jest-issue

[sean-perkins]

Hey everyone 👋 appreciate the issue and workarounds posted to help out others facing this issue. That's what makes this community awesome! I spoke with the Stencil team and they have isolated the changes causing this regression.

I'll track this issue as external to Stencil. The Ionic Framework team will follow up with a dev-build or a resolution when a new build is available.

Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.