Angular: Support experimentalZoneless mode

code/frameworks/angular/package.json

@@ -58,27 +58,28 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^0.2.24",
-    "@angular-devkit/architect": "^0.1703.0",
-    "@angular-devkit/build-angular": "^17.3.0",
-    "@angular-devkit/core": "^17.3.0",
-    "@angular/animations": "^17.3.0",
-    "@angular/cli": "^17.3.0",
-    "@angular/common": "^17.3.0",
-    "@angular/compiler": "^17.3.0",
-    "@angular/compiler-cli": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/forms": "^17.3.0",
-    "@angular/platform-browser": "^17.3.0",
-    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@analogjs/vite-plugin-angular": "^1.12.1",
+    "@angular-devkit/architect": "^0.1901.1",
+    "@angular-devkit/build-angular": "^19.1.1",
+    "@angular-devkit/core": "^19.1.1",
+    "@angular/animations": "^19.1.1",
+    "@angular/cli": "^19.1.1",
+    "@angular/common": "^19.1.1",
+    "@angular/compiler": "^19.1.1",
+    "@angular/compiler-cli": "^19.1.1",
+    "@angular/core": "^19.1.1",
+    "@angular/forms": "^19.1.1",
+    "@angular/platform-browser": "^19.1.1",
+    "@angular/platform-browser-dynamic": "^19.1.1",
     "@types/cross-spawn": "^6.0.2",
     "@types/node": "^22.0.0",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
+    "rimraf": "^6.0.1",
     "tmp": "^0.2.1",
     "typescript": "^5.3.2",
     "webpack": "5",
-    "zone.js": "^0.14.2"
+    "zone.js": "^0.15.0"
   },
   "peerDependencies": {
     "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0",
@@ -100,6 +101,9 @@
   "peerDependenciesMeta": {
     "@angular/cli": {
       "optional": true
+    },
+    "zone.js": {
+      "optional": true
     }
   },
   "engines": {

code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts

@@ -14,6 +14,12 @@ type StoryRenderInfo = {
   moduleMetadataSnapshot: string;
 };
 
+declare global {
+  const STORYBOOK_ANGULAR_OPTIONS: {
+    experimentalZoneless: boolean;
+  };
+}
+
 const applicationRefs = new Map<HTMLElement, ApplicationRef>();
 
 /**
@@ -112,28 +118,25 @@ export abstract class AbstractRenderer {
       analyzedMetadata,
     });
 
-    // TODO
-    const hasExperimentalZoneless = true;
-    let experimentalZonelessProvider: () => EnvironmentProviders | null = null;
+    const providers = [
+      storyPropsProvider(newStoryProps$),
+      ...analyzedMetadata.applicationProviders,
+      ...(storyFnAngular.applicationConfig?.providers ?? []),
+    ];
 
-    if (hasExperimentalZoneless) {
-      try {
-        const { provideExperimentalZonelessChangeDetection } = await import('@angular/core');
-        experimentalZonelessProvider = provideExperimentalZonelessChangeDetection;
-      } catch (error) {
+    if (STORYBOOK_ANGULAR_OPTIONS?.experimentalZoneless) {
+      const { provideExperimentalZonelessChangeDetection } = await import('@angular/core');
+      if (!provideExperimentalZonelessChangeDetection) {
         throw new Error('Experimental zoneless change detection requires Angular 18 or higher');
+      } else {
+        providers.unshift(provideExperimentalZonelessChangeDetection());
       }
     }
 
     const applicationRef = await queueBootstrapping(() => {
       return bootstrapApplication(application, {
         ...storyFnAngular.applicationConfig,
-        providers: [
-          experimentalZonelessProvider(),
-          storyPropsProvider(newStoryProps$),
-          ...analyzedMetadata.applicationProviders,
-          ...(storyFnAngular.applicationConfig?.providers ?? []),
-        ],
+        providers,
       });
     });
 

code/frameworks/angular/src/client/globals.ts

@@ -22,9 +22,6 @@ import { global } from '@storybook/global';
  */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
-/** Zone JS is required by Angular itself. */
-import 'zone.js';
-
 // Included with Angular CLI.
 
 /** APPLICATION IMPORTS */

code/frameworks/angular/src/preset.ts

@@ -3,7 +3,6 @@ import { PresetProperty } from 'storybook/internal/types';
 import { dirname, join } from 'node:path';
 
 import { StandaloneOptions } from './builders/utils/standalone-options';
-import { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;

code/frameworks/angular/src/server/framework-preset-angular-cli.ts

@@ -1,5 +1,6 @@
 import { logger } from 'storybook/internal/node-logger';
 import { AngularLegacyBuildOptionsError } from 'storybook/internal/server-errors';
+import { WebpackDefinePlugin } from '@storybook/builder-webpack5';
 
 import { BuilderContext, targetFromTargetString } from '@angular-devkit/architect';
 import { JsonObject, logging } from '@angular-devkit/core';
@@ -21,13 +22,25 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P
   const builderContext = getBuilderContext(options);
   const builderOptions = await getBuilderOptions(options, builderContext);
 
-  return getCustomWebpackConfig(baseConfig, {
+  const webpackConfig = await getCustomWebpackConfig(baseConfig, {
     builderOptions: {
       watch: options.configType === 'DEVELOPMENT',
       ...builderOptions,
-    },
+    } as any,
     builderContext,
   });
+
+  webpackConfig.plugins = webpackConfig.plugins ?? [];
+
+  webpackConfig.plugins.push(
+    new WebpackDefinePlugin({
+      STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({
+        experimentalZoneless: builderOptions.experimentalZoneless,
+      }),
+    })
+  );
+
+  return webpackConfig;
 }
 
 /** Get Builder Context If storybook is not start by angular builder create dumb BuilderContext */
@@ -45,10 +58,7 @@ function getBuilderContext(options: PresetOptions): BuilderContext {
 }
 
 /** Get builder options Merge target options from browser target and from storybook options */
-async function getBuilderOptions(
-  options: PresetOptions,
-  builderContext: BuilderContext
-): Promise<JsonObject> {
+async function getBuilderOptions(options: PresetOptions, builderContext: BuilderContext) {
   /** Get Browser Target options */
   let browserTargetOptions: JsonObject = {};
   if (options.angularBrowserTarget) {
@@ -65,7 +75,7 @@ async function getBuilderOptions(
   /** Merge target options from browser target options and from storybook options */
   const builderOptions = {
     ...browserTargetOptions,
-    ...(options.angularBuilderOptions as JsonObject),
+    ...options.angularBuilderOptions,
     tsConfig:
       options.tsConfig ??
       findUpSync('tsconfig.json', { cwd: options.configDir }) ??

code/frameworks/angular/src/server/preset-options.ts

@@ -1,17 +1,13 @@
 import { Options as CoreOptions } from 'storybook/internal/types';
 
 import { BuilderContext } from '@angular-devkit/architect';
-import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
-import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import { StandaloneOptions } from '../builders/utils/standalone-options';
 
 export type PresetOptions = CoreOptions & {
   /* Allow to get the options of a targeted "browser builder"  */
   angularBrowserTarget?: string | null;
   /* Defined set of options. These will take over priority from angularBrowserTarget options  */
-  angularBuilderOptions?: {
-    styles?: StyleElement[];
-    stylePreprocessorOptions?: StylePreprocessorOptions;
-  };
+  angularBuilderOptions?: StandaloneOptions['angularBuilderOptions'];
   /* Angular context from builder */
   angularBuilderContext?: BuilderContext | null;
   tsConfig?: string;

code/package.json

@@ -212,6 +212,7 @@
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rimraf": "^6.0.1",
     "semver": "^7.3.7",
     "serve-static": "^1.14.1",
     "slash": "^5.0.0",