[Feature Request] Angular: Support zoneless

[valentinpalkovic]

Discussed in https://github.com/storybookjs/storybook/discussions/28400

^{Originally posted by **valentinpalkovic** July 1, 2024} ### Is your feature request related to a problem? Please describe. Currently, Storybook always uses zone.js for change detection. ### Describe the solution you'd like Angular has introduced an experimental feature called [zoneless](https://angular.dev/guide/experimental/zoneless). The main benefit is that users can remove Zone.js to - Improved performance - Improved Core Web Vitals - Improved debugging experience - Better ecosystem compatibility The solution would be to enable experimental zoneless mode in Storybook by setting an experimental flag in Storybook's Angular builder options ```jsonc // angular.json { "storybook": { "builder": "@storybook/angular:start-storybook", "options": { ... "experimentalZoneless": true } }, "build-storybook": { "builder": "@storybook/angular:build-storybook", "options": { ... "experimentalZoneless": true } } } ``` ## Tasklist - [ ] Support new experimentalZoneless flag in Storybook's Angular builder options. The relevant files are the following: -- [code/frameworks/angular/src/builders/build-storybook/schema.json](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/build-storybook/schema.json) -- https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/build-storybook/index.ts -- https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/start-storybook/schema.json -- https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/start-storybook/index.ts - [ ] zone.js should be loaded conditionally -- This [file](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/client/index.ts) imports always [globals.ts](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/client/globals.ts), which loads always zone.js. We could try to remove the import and rely on people setting `zone.js` in the polyfills section of their `angular.json`, which Storybook in theory should also pick up. -- If the `experimentalZoneless` flag is set, we would have to register the zoneless provider [here](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts#L126): ```diff const applicationRef = await queueBootstrapping(() => { return bootstrapApplication(application, { ...storyFnAngular.applicationConfig, providers: [ + // Consider, that `provideExperimentalZonelessChangeDetection` cannot be imported "normally", because former Angular versions do not provide this export. A conditional dynamic import will be necessary + experimentalZoneless ? provideExperimentalZonelessChangeDetection() : null storyPropsProvider(newStoryProps$), ...analyzedMetadata.applicationProviders, ...(storyFnAngular.applicationConfig?.providers ?? []), - ], + ].filter(Boolean), }); }); ``` - [ ] Make sure that all zoneless requirements are met: https://angular.dev/guide/experimental/zoneless#requirements-for-zoneless-compatibility. As far as I can see, though, we only use the [ngzone.run function](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/client/angular-beta/StorybookProvider.ts#L24), which is compatible with [zoneless](https://angular.dev/guide/experimental/zoneless#remove-ngzoneonmicrotaskempty-ngzoneonunstable-ngzoneisstable-or-ngzoneonstable) ### Acceptance criteria - If a user does not have zone.js in `angular.json`'s `/architect/build/polyfills` array defined AND the `experimentalZoneless` option is set in `/architect/storybook|build-storybook/options`, Storybook and change detection via control changes should work. ### Development workflow - Clone Storybook - Follow the contribution guide (an extra Angular-specific section is available): https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md ### Describe alternatives you've considered _No response_ ### Are you able to assist to bring the feature to reality? As a maintainer I can support contributors to implement this feature if questions arise. ### Additional context _No response_

[valentinpalkovic]

Does someone want to work on it? I appreciate any help and can provide any guidance.

[anedomansky]

Hey, the task sounds really interesting and I would like to work on this!

[valentinpalkovic]

Hi @anedomansky

Thank you for taking it! I will assign this task to you. Feel free to create a draft PR and link the issue also in a early state even if the work isn’t done completely. Let me know if you need any kind of support!

[anedomansky]

Hey @valentinpalkovic and thank you for assigning the task to me and offering your support 💪 I will start as soon as I am able to and update you about my progress or if I have any questions.

[valentinpalkovic]

Hi @anedomansky

Do you have any remaining questions or issues getting started? Please let me know so that I can unblock you.

On the other side, if you don't have time to work on it, just let me know and I will unassign you. That is also totally fine! But then others might want to pick up the task.

[anedomansky]

Hey @valentinpalkovic ,

Thanks for reaching out! I am actually planning to open my (draft) PR tomorrow! Other than that, I have one open question: Is there a preferred way to get the "polyfills"-value from the angular.json? I looked through the repo and couldn't really find anything about that 🤔

[ed4becky]

Any update to this? I've looked at the commits but looks like they are not in main branch?

[jdruper]

Hey @valentinpalkovic, any news on this? I see that the Draft PR has some build issues. Anyway I can help get this through?