From 573b665def51ba8a443c6db81d6ba41a1024cce4 Mon Sep 17 00:00:00 2001
From: Guy Senpai <guy.senpai@gmail.com>
Date: Fri, 13 Jun 2025 10:31:37 +0200
Subject: [PATCH 1/2] Angular: fix Storybook experimentalZoneless is not
 compatible with Angular 20

---
 .../src/client/angular-beta/AbstractRenderer.ts   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts
index 6ca3c5151a3f..4288f0ba1f71 100644
--- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts
+++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts
@@ -127,11 +127,18 @@ export abstract class AbstractRenderer {
     ];
 
     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');
+      const angularCore: any = await import('@angular/core');
+      const provideZonelessChangeDetectionFn =
+        'provideExperimentalZonelessChangeDetection' in angularCore
+          ? angularCore.provideExperimentalZonelessChangeDetection
+          : 'provideZonelessChangeDetection' in angularCore
+            ? angularCore.provideZonelessChangeDetection
+            : null;
+
+      if (!provideZonelessChangeDetectionFn) {
+        throw new Error('Zoneless change detection requires Angular 18 or higher');
       } else {
-        providers.unshift(provideExperimentalZonelessChangeDetection());
+        providers.unshift(provideZonelessChangeDetectionFn());
       }
     }
 

From 0c110cc0637dd9e88ef2917541a3b806ca9de428 Mon Sep 17 00:00:00 2001
From: Guy Senpai <guy.senpai@gmail.com>
Date: Sat, 14 Jun 2025 04:30:53 +0200
Subject: [PATCH 2/2] Angular: move to getProvideZonelessChangeDetectionFn
 function

---
 .../angular/src/client/angular-beta/AbstractRenderer.ts  | 9 ++-------
 .../angular/src/client/angular-beta/utils/Zoneless.ts    | 9 +++++++++
 2 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 code/frameworks/angular/src/client/angular-beta/utils/Zoneless.ts

diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts
index 4288f0ba1f71..368dddf11d2e 100644
--- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts
+++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts
@@ -9,6 +9,7 @@ import { getApplication } from './StorybookModule';
 import { storyPropsProvider } from './StorybookProvider';
 import { queueBootstrapping } from './utils/BootstrapQueue';
 import { PropertyExtractor } from './utils/PropertyExtractor';
+import { getProvideZonelessChangeDetectionFn } from './utils/Zoneless';
 
 type StoryRenderInfo = {
   storyFnAngular: StoryFnAngularReturnType;
@@ -127,13 +128,7 @@ export abstract class AbstractRenderer {
     ];
 
     if (STORYBOOK_ANGULAR_OPTIONS?.experimentalZoneless) {
-      const angularCore: any = await import('@angular/core');
-      const provideZonelessChangeDetectionFn =
-        'provideExperimentalZonelessChangeDetection' in angularCore
-          ? angularCore.provideExperimentalZonelessChangeDetection
-          : 'provideZonelessChangeDetection' in angularCore
-            ? angularCore.provideZonelessChangeDetection
-            : null;
+      const provideZonelessChangeDetectionFn = await getProvideZonelessChangeDetectionFn();
 
       if (!provideZonelessChangeDetectionFn) {
         throw new Error('Zoneless change detection requires Angular 18 or higher');
diff --git a/code/frameworks/angular/src/client/angular-beta/utils/Zoneless.ts b/code/frameworks/angular/src/client/angular-beta/utils/Zoneless.ts
new file mode 100644
index 000000000000..f168ceab083d
--- /dev/null
+++ b/code/frameworks/angular/src/client/angular-beta/utils/Zoneless.ts
@@ -0,0 +1,9 @@
+export const getProvideZonelessChangeDetectionFn = async () => {
+  const angularCore: any = await import('@angular/core');
+
+  return 'provideExperimentalZonelessChangeDetection' in angularCore
+    ? angularCore.provideExperimentalZonelessChangeDetection
+    : 'provideZonelessChangeDetection' in angularCore
+      ? angularCore.provideZonelessChangeDetection
+      : null;
+};