Angular: Support experimental zoneless mode

[anedomansky]

Closes #28403

What I did

• Added a the new "experimentalZoneless" flag in order to use the experimental zoneless change detection introduced in Angular 18.
• [edited by @valentinpalkovic]: Removed the default polyfill zone.js. Storybook is automatically picking up the user's polyfills. Therefore, zone.js was polyfilled twice.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.9 MB	77.9 MB	1.93 kB	4.91	0%
initSize	131 MB	131 MB	-5.19 kB	2.69	0%
diffSize	52.9 MB	52.9 MB	-7.11 kB	-0.23	0%
buildSize	7.19 MB	7.19 MB	-2.28 kB	-1.02	0%
buildSbAddonsSize	1.85 MB	1.85 MB	-235 B	-5.63	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	-1.65 kB	-0.49	-0.1%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	-1.88 kB	-1.16	0%
buildPreviewSize	3.28 MB	3.28 MB	-395 B	-0.5	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	8.7s	24.5s	15.8s	1.93	🔺64.5%
generateTime	23.4s	20.9s	-2s -432ms	-0.01	-11.6%
initTime	16.2s	14.1s	-2s -60ms	-0.09	-14.5%
buildTime	9.3s	10.3s	1s	0.61	10.1%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.3s	5s	-326ms	0.38	-6.4%
devManagerResponsive	3.7s	3.6s	-99ms	0.14	-2.7%
devManagerHeaderVisible	670ms	588ms	-82ms	-0.36	-13.9%
devManagerIndexVisible	702ms	617ms	-85ms	-0.37	-13.8%
devStoryVisibleUncached	2.2s	1.9s	-284ms	0.33	-14.7%
devStoryVisible	703ms	618ms	-85ms	-0.47	-13.8%
devAutodocsVisible	622ms	525ms	-97ms	-0.12	-18.5%
devMDXVisible	713ms	531ms	-182ms	-0.25	-34.3%
buildManagerHeaderVisible	647ms	563ms	-84ms	-0.11	-14.9%
buildManagerIndexVisible	732ms	647ms	-85ms	-0.18	-13.1%
buildStoryVisible	624ms	547ms	-77ms	-0.09	-14.1%
buildAutodocsVisible	570ms	463ms	-107ms	-0.03	-23.1%
buildMDXVisible	496ms	431ms	-65ms	-0.52	-15.1%

Greptile Summary

Adds support for Angular's experimental zoneless mode by introducing configuration options and modifying the framework to conditionally load zone.js, enabling improved performance and debugging capabilities.

• Added experimentalZoneless flag in code/frameworks/angular/src/builders/build-storybook/schema.json and start-storybook/schema.json
• Modified code/frameworks/angular/src/client/globals.ts to remove mandatory zone.js import
• Updated code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts to support conditional zoneless change detection
• Made zone.js an optional peer dependency in code/frameworks/angular/package.json
• Added WebpackDefinePlugin configuration in code/frameworks/angular/src/server/framework-preset-angular-cli.ts to expose zoneless settings

_{💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!}

[anedomansky]

Hi @valentinpalkovic

I tried to read the necessary information from the angular.json via the helper class "AngularJSON".
I still do not know if this is the right approach...
Other than that, I still have the open problem that I can not really import the "provideExperimentalZonelessChangeDetection" provider from "@angular/core" without updating the package and all related ones to their respective 18.X versions.
Can you perhaps enlighten me on how to progress from here?

Thanks!

[valentinpalkovic]

I didn’t had a chance to take a look today. I’ll take a look on Monday and I will clarify what’s unclear! Thank you for putting together the PR so far :)

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 4bc2c80.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 47s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-20 10:24:00 UTC

[greptile-apps]

_{13 file(s) reviewed, 6 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

_{13 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile}