Angular: Enable experimental zoneless detection on Angular v21 #32580
Conversation
yannbf
added
angular
patch:yes
Walkthrough
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant CLI as Storybook CLI (start/build)
participant Builder as Angular Storybook Builder
participant NG as @angular/core (VERSION)
participant Preset as framework-preset-angular-cli
participant Exec as Angular Builder Execution
User->>CLI: Run start-storybook / build-storybook
CLI->>Builder: Initialize with options
Builder->>NG: Read VERSION.major
alt VERSION.major >= 21
note right of Builder: experimentalZoneless -> true
else VERSION.major missing or < 21
note right of Builder: experimentalZoneless -> false
end
Builder->>Preset: getBuilderOptions(options with experimentalZoneless)
Preset->>Preset: builderOptions.experimentalZoneless = options.angularBuilderOptions?.experimentalZoneless
Preset-->>Builder: Return builderOptions
Builder->>Exec: Invoke Angular build/start with builderOptions
Exec-->>User: Build/Serve result
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
Comment |
|
View your CI Pipeline Execution ↗ for commit bef0400
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
code/frameworks/angular/build-schema.json(5 hunks)code/frameworks/angular/src/builders/build-storybook/index.ts(2 hunks)code/frameworks/angular/src/builders/start-storybook/index.ts(2 hunks)code/frameworks/angular/src/server/framework-preset-angular-cli.ts(1 hunks)code/frameworks/angular/start-schema.json(6 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Adhere to ESLint and Prettier rules across all JS/TS source files
Files:
code/frameworks/angular/src/server/framework-preset-angular-cli.tscode/frameworks/angular/src/builders/build-storybook/index.tscode/frameworks/angular/src/builders/start-storybook/index.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode
Files:
code/frameworks/angular/src/server/framework-preset-angular-cli.tscode/frameworks/angular/src/builders/build-storybook/index.tscode/frameworks/angular/src/builders/start-storybook/index.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Danger JS
- GitHub Check: daily
- GitHub Check: Core Unit Tests, windows-latest
- GitHub Check: get-parameters
| builderOptions.experimentalZoneless = options.angularBuilderOptions?.experimentalZoneless; | ||
|
|
There was a problem hiding this comment.
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.
| 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.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/get-started/frameworks/angular.mdx (1)
17-18: Fix Angular version range in requirementsThis PR enables Storybook to work with Angular 21 when zoneless detection is on, but the requirements still read “Angular ≥ 18.0 < 21.0”. That excludes 21 entirely and will mislead anyone trying to follow the docs for the newly supported version. Please update the stated range (e.g., “Angular ≥ 18.0 ≤ 21.x” or similar) so it reflects the new compatibility.
🧹 Nitpick comments (1)
docs/get-started/frameworks/angular.mdx (1)
370-372: Document the new default behavior forexperimentalZonelessWith Angular ≥ 21 the builders now enable zoneless by default, while older majors leave it off. Call that out here so readers know when they actually need to set the option manually.
-| `"experimentalZoneless"` | Configure [zoneless change detection](https://angular.dev/guide/zoneless). <br /> `"experimentalZoneless": true` | +| `"experimentalZoneless"` | Configure [zoneless change detection](https://angular.dev/guide/zoneless). Defaults to `true` on Angular 21+ and `false` otherwise. <br /> `"experimentalZoneless": true` |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/get-started/frameworks/angular.mdx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: daily
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (1)
docs/get-started/frameworks/angular.mdx (1)
375-376: Schema link updates look goodThe links now point at the live JSON schemas under
code/frameworks/angular/…; no further action needed.
…gular-21 Angular: Enable experimental zoneless detection on Angular v21 (cherry picked from commit 55d57b9)
github-actions
bot
added
the
patch:done
Closes #
What I did
Starting in Angular 21, zone.js is not included anymore. Therefore, we set the
experimentalZonelessoption turned on by default.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Summary by CodeRabbit