Skip to content

Angular: Enable experimental zoneless detection on Angular v21 #32580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yannbf merged 2 commits into from
Sep 30, 2025
Merged

Angular: Enable experimental zoneless detection on Angular v21 #32580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1002cb
Angular: Enable experimental zoneless detection on Angular v21
yannbf Sep 30, 2025
bef0400
update links and paths in the docs
yannbf Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 26 additions & 9 deletions code/frameworks/angular/build-schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,18 +67,27 @@
"compodocArgs": {
"type": "array",
"description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
"default": ["-e", "json"],
"default": [
"-e",
"json"
],
"items": {
"type": "string"
}
},
"webpackStatsJson": {
"type": ["boolean", "string"],
"type": [
"boolean",
"string"
],
"description": "Write Webpack Stats JSON to disk",
"default": false
},
"statsJson": {
"type": ["boolean", "string"],
"type": [
"boolean",
"string"
],
"description": "Write stats JSON to disk",
"default": false
},
Expand Down Expand Up @@ -116,14 +125,16 @@
}
},
"sourceMap": {
"type": ["boolean", "object"],
"type": [
"boolean",
"object"
],
"description": "Configure sourcemaps. See: https://angular.io/guide/workspace-config#source-map-configuration",
"default": false
},
"experimentalZoneless": {
"type": "boolean",
"description": "Experimental: Use zoneless change detection.",
"default": false
"description": "Experimental: Use zoneless change detection."
}
},
"additionalProperties": false,
Expand Down Expand Up @@ -159,7 +170,11 @@
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
"required": [
"glob",
"input",
"output"
]
},
{
"type": "string"
Expand Down Expand Up @@ -187,7 +202,9 @@
}
},
"additionalProperties": false,
"required": ["input"]
"required": [
"input"
]
},
{
"type": "string",
Expand All @@ -196,4 +213,4 @@
]
}
}
}
}
3 changes: 2 additions & 1 deletion code/frameworks/angular/src/builders/build-storybook/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
import { errorSummary, printErrorDetails } from '../utils/error-handler';
import { runCompodoc } from '../utils/run-compodoc';
import type { StandaloneOptions } from '../utils/standalone-options';
import { VERSION } from '@angular/core';

addToGlobalContext('cliVersion', versions.storybook);

Expand Down Expand Up @@ -113,7 +114,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
previewUrl,
sourceMap = false,
preserveSymlinks = false,
experimentalZoneless = false,
experimentalZoneless = !!(VERSION.major && Number(VERSION.major) >= 21),
} = options;

const packageJsonPath = pkg.up({ cwd: __dirname });
Expand Down
3 changes: 2 additions & 1 deletion code/frameworks/angular/src/builders/start-storybook/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { map, mapTo, switchMap } from 'rxjs/operators';
import { errorSummary, printErrorDetails } from '../utils/error-handler';
import { runCompodoc } from '../utils/run-compodoc';
import type { StandaloneOptions } from '../utils/standalone-options';
import { VERSION } from '@angular/core';

addToGlobalContext('cliVersion', versions.storybook);

Expand Down Expand Up @@ -130,7 +131,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
previewUrl,
sourceMap = false,
preserveSymlinks = false,
experimentalZoneless = false,
experimentalZoneless = !!(VERSION.major && Number(VERSION.major) >= 21),
} = options;

const packageJsonPath = pkg.up({ cwd: __dirname });
Expand Down
2 changes: 2 additions & 0 deletions code/frameworks/angular/src/server/framework-preset-angular-cli.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,8 @@ export async function getBuilderOptions(options: PresetOptions, builderContext:
browserTargetOptions.tsConfig;
logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);

builderOptions.experimentalZoneless = options.angularBuilderOptions?.experimentalZoneless;

Comment on lines +153 to +154

@coderabbitai coderabbitai Bot Sep 30, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Prevent clobbering target defaults for experimentalZoneless.

We deep-merge the target options first, which already capture experimentalZoneless from the Angular browser target. The new unconditional assignment overwrites that with undefined whenever Storybook didn’t explicitly pass the option (common when the preset runs outside our builders), so Angular’s v21-default of true regresses back to falsy. Please only assign when the Storybook options actually provide a boolean.

-  builderOptions.experimentalZoneless = options.angularBuilderOptions?.experimentalZoneless;
+  if (options.angularBuilderOptions?.experimentalZoneless !== undefined) {
+    builderOptions.experimentalZoneless = options.angularBuilderOptions.experimentalZoneless;
+  }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
builderOptions.experimentalZoneless = options.angularBuilderOptions?.experimentalZoneless;
if (options.angularBuilderOptions?.experimentalZoneless !== undefined) {
builderOptions.experimentalZoneless = options.angularBuilderOptions.experimentalZoneless;
}
🤖 Prompt for AI Agents 
In code/frameworks/angular/src/server/framework-preset-angular-cli.ts around
lines 153-154, the unconditional assignment "builderOptions.experimentalZoneless
= options.angularBuilderOptions?.experimentalZoneless" clobbers defaults when
Storybook doesn't supply the option; change it to only set
builderOptions.experimentalZoneless when
options.angularBuilderOptions?.experimentalZoneless is a boolean (e.g., guard
with typeof === 'boolean' before assigning) so existing merged target defaults
are preserved otherwise.

return builderOptions;
}

Expand Down
35 changes: 26 additions & 9 deletions code/frameworks/angular/start-schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,10 @@
"compodocArgs": {
"type": "array",
"description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
"default": ["-e", "json"],
"default": [
"-e",
"json"
],
"items": {
"type": "string"
}
Expand Down Expand Up @@ -132,12 +135,18 @@
"description": "URL path to be appended when visiting Storybook for the first time"
},
"webpackStatsJson": {
"type": ["boolean", "string"],
"type": [
"boolean",
"string"
],
"description": "Write Webpack Stats JSON to disk",
"default": false
},
"statsJson": {
"type": ["boolean", "string"],
"type": [
"boolean",
"string"
],
"description": "Write stats JSON to disk",
"default": false
},
Expand All @@ -151,14 +160,16 @@
"pattern": "(silly|verbose|info|warn|silent)"
},
"sourceMap": {
"type": ["boolean", "object"],
"type": [
"boolean",
"object"
],
"description": "Configure sourcemaps. See: https://angular.io/guide/workspace-config#source-map-configuration",
"default": false
},
"experimentalZoneless": {
"type": "boolean",
"description": "Experimental: Use zoneless change detection.",
"default": false
"description": "Experimental: Use zoneless change detection."
}
},
"additionalProperties": false,
Expand Down Expand Up @@ -194,7 +205,11 @@
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
"required": [
"glob",
"input",
"output"
]
},
{
"type": "string"
Expand Down Expand Up @@ -222,7 +237,9 @@
}
},
"additionalProperties": false,
"required": ["input"]
"required": [
"input"
]
},
{
"type": "string",
Expand All @@ -231,4 +248,4 @@
]
}
}
}
}
7 changes: 4 additions & 3 deletions docs/get-started/frameworks/angular.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,12 +367,13 @@ These are common options you may need for the Angular builder:
| `"webpackStatsJson"` | Write Webpack Stats JSON to disk. <br /> `"webpackStatsJson": true` |
| `"previewUrl"` | Disables the default storybook preview and lets you use your own. <br /> `"previewUrl": "iframe.html"` |
| `"loglevel"` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]. <br /> `"loglevel": "info"` |
| `"sourceMap"` | Configure [sourcemaps](https://angular.io/guide/workspace-config#source-map-configuration.). <br /> `"sourceMap": true` |
| `"sourceMap"` | Configure [sourcemaps](https://angular.dev/reference/configs/workspace-config#source-map-configuration.). <br /> `"sourceMap": true` |
| `"experimentalZoneless"` | Configure [zoneless change detection](https://angular.dev/guide/zoneless). <br /> `"experimentalZoneless": true` |

The full list of options can be found in the Angular builder schemas:

* [Build Storybook](https://github.com/storybookjs/storybook/blob/main/code/frameworks/angular/src/builders/build-storybook/schema.json)
* [Start Storybook](https://github.com/storybookjs/storybook/blob/main/code/frameworks/angular/src/builders/start-storybook/schema.json)
* [Build Storybook](https://github.com/storybookjs/storybook/blob/main/code/frameworks/angular/build-schema.json)
* [Start Storybook](https://github.com/storybookjs/storybook/blob/main/code/frameworks/angular/start-schema.json)

## API

Expand Down