diff --git a/code/frameworks/angular/build-schema.json b/code/frameworks/angular/build-schema.json index e2ff3e842c2a..12e9e2af7ebe 100644 --- a/code/frameworks/angular/build-schema.json +++ b/code/frameworks/angular/build-schema.json @@ -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 }, @@ -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, @@ -159,7 +170,11 @@ } }, "additionalProperties": false, - "required": ["glob", "input", "output"] + "required": [ + "glob", + "input", + "output" + ] }, { "type": "string" @@ -187,7 +202,9 @@ } }, "additionalProperties": false, - "required": ["input"] + "required": [ + "input" + ] }, { "type": "string", @@ -196,4 +213,4 @@ ] } } -} +} \ No newline at end of file diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts index b12b7cb99fe8..ca08aef2ddac 100644 --- a/code/frameworks/angular/src/builders/build-storybook/index.ts +++ b/code/frameworks/angular/src/builders/build-storybook/index.ts @@ -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); @@ -113,7 +114,7 @@ const commandBuilder: BuilderHandlerFn = ( previewUrl, sourceMap = false, preserveSymlinks = false, - experimentalZoneless = false, + experimentalZoneless = !!(VERSION.major && Number(VERSION.major) >= 21), } = options; const packageJsonPath = pkg.up({ cwd: __dirname }); diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts index 18f69daeb56e..2fd75f075984 100644 --- a/code/frameworks/angular/src/builders/start-storybook/index.ts +++ b/code/frameworks/angular/src/builders/start-storybook/index.ts @@ -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); @@ -130,7 +131,7 @@ const commandBuilder: BuilderHandlerFn = (options, cont previewUrl, sourceMap = false, preserveSymlinks = false, - experimentalZoneless = false, + experimentalZoneless = !!(VERSION.major && Number(VERSION.major) >= 21), } = options; const packageJsonPath = pkg.up({ cwd: __dirname }); diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts index cd66ad4fc779..3dd0643c02bc 100644 --- a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts +++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts @@ -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; + return builderOptions; } diff --git a/code/frameworks/angular/start-schema.json b/code/frameworks/angular/start-schema.json index 30d4cbc9f718..7befb6f8b727 100644 --- a/code/frameworks/angular/start-schema.json +++ b/code/frameworks/angular/start-schema.json @@ -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" } @@ -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 }, @@ -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, @@ -194,7 +205,11 @@ } }, "additionalProperties": false, - "required": ["glob", "input", "output"] + "required": [ + "glob", + "input", + "output" + ] }, { "type": "string" @@ -222,7 +237,9 @@ } }, "additionalProperties": false, - "required": ["input"] + "required": [ + "input" + ] }, { "type": "string", @@ -231,4 +248,4 @@ ] } } -} +} \ No newline at end of file diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx index 6d4a2bce1a10..79e5dac188c2 100644 --- a/docs/get-started/frameworks/angular.mdx +++ b/docs/get-started/frameworks/angular.mdx @@ -367,12 +367,13 @@ These are common options you may need for the Angular builder: | `"webpackStatsJson"` | Write Webpack Stats JSON to disk.
`"webpackStatsJson": true` | | `"previewUrl"` | Disables the default storybook preview and lets you use your own.
`"previewUrl": "iframe.html"` | | `"loglevel"` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].
`"loglevel": "info"` | -| `"sourceMap"` | Configure [sourcemaps](https://angular.io/guide/workspace-config#source-map-configuration.).
`"sourceMap": true` | +| `"sourceMap"` | Configure [sourcemaps](https://angular.dev/reference/configs/workspace-config#source-map-configuration.).
`"sourceMap": true` | +| `"experimentalZoneless"` | Configure [zoneless change detection](https://angular.dev/guide/zoneless).
`"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