[Feature Request] Angular: Support zoneless

[Valentin Palkovic]

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

[Valentin Palkovic]

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