[Feature Request] Angular: Support zoneless

[valentinpalkovic]

Discussed in #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.
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

// 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/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 imports always 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:

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, which is compatible with zoneless

Acceptance criteria

• If a user does not have zone.js in angular.json's <project>/architect/build/polyfills array defined AND the experimentalZoneless option is set in <project>/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?

[valentinpalkovic]

Picking up the work from @anedomansky now and try to finalize it.