feat(core): Move zoneless change detection to dev preview (angular#60748)

This commit moves zoneless from experimental to developer preview.

* Update tag on provider API
* Remove "experimental" from provider name
* Move documentation from "experimental features" to "Best practives ->
  Performance" (at least temporarily until there is a better place)

BREAKING CHANGE: `provideExperimentalZonelessChangeDetection` is
renamed to `provideZonelessChangeDetection` as it is now "Developer
Preview" rather than "Experimental".

PR Close angular#60748

Author: atscott

adev/shared-docs/components/breadcrumb/breadcrumb.component.spec.ts

@@ -13,7 +13,7 @@ import {NavigationState} from '../../services';
 import {NavigationItem} from '../../interfaces';
 import {By} from '@angular/platform-browser';
 import {RouterTestingModule} from '@angular/router/testing';
-import {provideExperimentalZonelessChangeDetection} from '@angular/core';
+import {provideZonelessChangeDetection} from '@angular/core';
 
 describe('Breadcrumb', () => {
   let fixture: ComponentFixture<Breadcrumb>;
@@ -25,7 +25,7 @@ describe('Breadcrumb', () => {
     TestBed.configureTestingModule({
       imports: [Breadcrumb, RouterTestingModule],
       providers: [
-        provideExperimentalZonelessChangeDetection(),
+        provideZonelessChangeDetection(),
         {
           provide: NavigationState,
           useValue: navigationStateSpy,

adev/shared-docs/components/cookie-popup/cookie-popup.component.spec.ts

@@ -11,7 +11,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {CookiePopup, STORAGE_KEY} from './cookie-popup.component';
 import {LOCAL_STORAGE} from '../../providers/index';
 import {MockLocalStorage} from '../../testing/index';
-import {provideExperimentalZonelessChangeDetection} from '@angular/core';
+import {provideZonelessChangeDetection} from '@angular/core';
 
 describe('CookiePopup', () => {
   let fixture: ComponentFixture<CookiePopup>;
@@ -21,7 +21,7 @@ describe('CookiePopup', () => {
     TestBed.configureTestingModule({
       imports: [CookiePopup],
       providers: [
-        provideExperimentalZonelessChangeDetection(),
+        provideZonelessChangeDetection(),
         {
           provide: LOCAL_STORAGE,
           useValue: mockLocalStorage,

adev/shared-docs/components/copy-source-code-button/copy-source-code-button.component.spec.ts

@@ -15,7 +15,7 @@ import {
 import {
   ChangeDetectionStrategy,
   Component,
-  provideExperimentalZonelessChangeDetection,
+  provideZonelessChangeDetection,
   signal,
 } from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -32,7 +32,7 @@ describe('CopySourceCodeButton', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
       imports: [CodeSnippetWrapper],
-      providers: [provideExperimentalZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection()],
     });
     fixture = TestBed.createComponent(CodeSnippetWrapper);
     component = fixture.componentInstance;

adev/shared-docs/components/navigation-list/navigation-list.component.spec.ts

@@ -12,7 +12,7 @@ import {NavigationList} from './navigation-list.component';
 import {By} from '@angular/platform-browser';
 import {NavigationItem} from '../../interfaces';
 import {provideRouter} from '@angular/router';
-import {provideExperimentalZonelessChangeDetection, signal} from '@angular/core';
+import {provideZonelessChangeDetection, signal} from '@angular/core';
 import {NavigationState} from '../../services';
 
 const navigationItems: NavigationItem[] = [
@@ -41,7 +41,7 @@ describe('NavigationList', () => {
       providers: [
         provideRouter([]),
         {provide: NavigationState, useClass: FakeNavigationListState},
-        provideExperimentalZonelessChangeDetection(),
+        provideZonelessChangeDetection(),
       ],
     }).compileComponents();
     fixture = TestBed.createComponent(NavigationList);

adev/shared-docs/components/search-dialog/search-dialog.component.spec.ts

@@ -16,11 +16,7 @@ import {By} from '@angular/platform-browser';
 import {AlgoliaIcon} from '../algolia-icon/algolia-icon.component';
 import {RouterTestingModule} from '@angular/router/testing';
 import {Router} from '@angular/router';
-import {
-  ApplicationRef,
-  provideExperimentalZonelessChangeDetection,
-  ResourceStatus,
-} from '@angular/core';
+import {ApplicationRef, provideZonelessChangeDetection, ResourceStatus} from '@angular/core';
 import {SearchResult} from '../../interfaces';
 
 describe('SearchDialog', () => {
@@ -38,7 +34,7 @@ describe('SearchDialog', () => {
     TestBed.configureTestingModule({
       imports: [SearchDialog, RouterTestingModule],
       providers: [
-        provideExperimentalZonelessChangeDetection(),
+        provideZonelessChangeDetection(),
         {provide: ENVIRONMENT, useValue: {algolia: {index: 'fakeIndex'}}},
         {provide: ALGOLIA_CLIENT, useValue: {search: searchResults}},
         {provide: WINDOW, useValue: fakeWindow},

adev/shared-docs/components/select/select.component.spec.ts

@@ -9,7 +9,7 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {Select} from './select.component';
-import {provideExperimentalZonelessChangeDetection} from '@angular/core';
+import {provideZonelessChangeDetection} from '@angular/core';
 
 describe('Select', () => {
   let component: Select;
@@ -18,7 +18,7 @@ describe('Select', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [Select],
-      providers: [provideExperimentalZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection()],
     });
     fixture = TestBed.createComponent(Select);
     component = fixture.componentInstance;

adev/shared-docs/components/slide-toggle/slide-toggle.component.spec.ts

@@ -9,7 +9,7 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {SlideToggle} from './slide-toggle.component';
-import {provideExperimentalZonelessChangeDetection} from '@angular/core';
+import {provideZonelessChangeDetection} from '@angular/core';
 
 describe('SlideToggle', () => {
   let component: SlideToggle;
@@ -18,7 +18,7 @@ describe('SlideToggle', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [SlideToggle],
-      providers: [provideExperimentalZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection()],
     });
     fixture = TestBed.createComponent(SlideToggle);
     fixture.componentRef.setInput('buttonId', 'id');

adev/shared-docs/components/table-of-contents/table-of-contents.component.spec.ts

@@ -12,7 +12,7 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {TableOfContentsItem, TableOfContentsLevel} from '../../interfaces/index';
 import {TableOfContentsLoader} from '../../services/index';
 import {WINDOW} from '../../providers/index';
-import {provideExperimentalZonelessChangeDetection, signal} from '@angular/core';
+import {provideZonelessChangeDetection, signal} from '@angular/core';
 
 describe('TableOfContents', () => {
   let component: TableOfContents;
@@ -43,7 +43,7 @@ describe('TableOfContents', () => {
     await TestBed.configureTestingModule({
       imports: [TableOfContents, RouterTestingModule],
       providers: [
-        provideExperimentalZonelessChangeDetection(),
+        provideZonelessChangeDetection(),
         {
           provide: WINDOW,
           useValue: fakeWindow,

adev/shared-docs/components/text-field/text-field.component.spec.ts

@@ -9,7 +9,7 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {TextField} from './text-field.component';
-import {provideExperimentalZonelessChangeDetection} from '@angular/core';
+import {provideZonelessChangeDetection} from '@angular/core';
 
 describe('TextField', () => {
   let component: TextField;
@@ -18,7 +18,7 @@ describe('TextField', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [TextField],
-      providers: [provideExperimentalZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection()],
     });
     fixture = TestBed.createComponent(TextField);
     component = fixture.componentInstance;

adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.spec.ts

@@ -18,7 +18,7 @@ import {Breadcrumb} from '../../breadcrumb/breadcrumb.component';
 import {NavigationState} from '../../../services';
 import {CopySourceCodeButton} from '../../copy-source-code-button/copy-source-code-button.component';
 import {TableOfContents} from '../../table-of-contents/table-of-contents.component';
-import {provideExperimentalZonelessChangeDetection} from '@angular/core';
+import {provideZonelessChangeDetection} from '@angular/core';
 
 describe('DocViewer', () => {
   let fixture: ComponentFixture<DocViewer>;
@@ -82,7 +82,7 @@ describe('DocViewer', () => {
       imports: [DocViewer],
       providers: [
         provideRouter([]),
-        provideExperimentalZonelessChangeDetection(),
+        provideZonelessChangeDetection(),
         {provide: EXAMPLE_VIEWER_CONTENT_LOADER, useValue: exampleContentSpy},
         {provide: NavigationState, useValue: navigationStateSpy},
       ],

adev/shared-docs/components/viewers/example-viewer/example-viewer.component.spec.ts

@@ -10,7 +10,7 @@ import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {ExampleViewer} from './example-viewer.component';
 import {ExampleMetadata, ExampleViewerContentLoader} from '../../../interfaces';
 import {EXAMPLE_VIEWER_CONTENT_LOADER} from '../../../providers';
-import {Component, provideExperimentalZonelessChangeDetection, ComponentRef} from '@angular/core';
+import {Component, provideZonelessChangeDetection, ComponentRef} from '@angular/core';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Clipboard} from '@angular/cdk/clipboard';
@@ -36,7 +36,7 @@ describe('ExampleViewer', () => {
       imports: [ExampleViewer],
       providers: [
         // TODO: Find why tests warn that zone.js is still loaded
-        provideExperimentalZonelessChangeDetection(),
+        provideZonelessChangeDetection(),
         {provide: EXAMPLE_VIEWER_CONTENT_LOADER, useValue: exampleContentSpy},
         {provide: ActivatedRoute, useValue: {snapshot: {fragment: 'fragment'}}},
       ],

adev/src/app/app.config.ts

@@ -13,7 +13,7 @@ import {
   ErrorHandler,
   VERSION,
   inject,
-  provideExperimentalZonelessChangeDetection,
+  provideZonelessChangeDetection,
   provideEnvironmentInitializer,
 } from '@angular/core';
 import {
@@ -38,7 +38,7 @@ import {routerProviders} from './router_providers';
 export const appConfig: ApplicationConfig = {
   providers: [
     routerProviders,
-    provideExperimentalZonelessChangeDetection(),
+    provideZonelessChangeDetection(),
     provideClientHydration(),
     provideHttpClient(withFetch()),
     provideEnvironmentInitializer(() => inject(AnalyticsService)),

adev/src/app/sub-navigation-data.ts

@@ -583,12 +583,6 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
           },
         ],
       },
-      {
-        label: 'Experimental features',
-        children: [
-          {label: 'Zoneless', path: 'guide/experimental/zoneless', contentPath: 'guide/zoneless'},
-        ],
-      },
     ],
   },
   {
@@ -752,6 +746,7 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'best-practices/skipping-subtrees',
             contentPath: 'best-practices/runtime-performance/skipping-subtrees',
           },
+          {label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'},
         ],
       },
       {

adev/src/content/guide/testing/components-scenarios.md

@@ -73,7 +73,7 @@ Then add it to the `providers` array of the testing module configuration:
 
 HELPFUL: You can also use the `fixture.autoDetectChanges()` function instead if you only want to enable automatic change detection
 after making updates to the state of the fixture's component. In addition, automatic change detection is on by default
-when using `provideExperimentalZonelessChangeDetection` and turning it off is not recommended.
+when using `provideZonelessChangeDetection` and turning it off is not recommended.
 
 Here are three tests that illustrate how automatic change detection works.
 

adev/src/content/guide/zoneless.md

@@ -11,19 +11,18 @@ The main advantages to removing ZoneJS as a dependency are:
 
 ## Enabling Zoneless in an application
 
-The API for enabling Zoneless is currently experimental. Neither the shape, nor the underlying behavior is stable and can change
-in patch versions. There are known feature gaps, including the lack of an ergonomic API which prevents the application from serializing too early with Server Side Rendering.
+The API for enabling Zoneless is currently in developer preview. The shape of the API and underlying behavior can change in patch versions.
 
 ```typescript
 // standalone bootstrap
 bootstrapApplication(MyApp, {providers: [
-  provideExperimentalZonelessChangeDetection(),
+  provideZonelessChangeDetection(),
 ]});
 
 // NgModule bootstrap
 platformBrowser().bootstrapModule(AppModule);
 @NgModule({
-  providers: [provideExperimentalZonelessChangeDetection()]
+  providers: [provideZonelessChangeDetection()]
 })
 export class AppModule {}
 ```
@@ -134,7 +133,7 @@ Angular application.
 
 ```typescript
 TestBed.configureTestingModule({
-  providers: [provideExperimentalZonelessChangeDetection()]
+  providers: [provideZonelessChangeDetection()]
 });
 
 const fixture = TestBed.createComponent(MyComponent);

adev/src/content/reference/roadmap.md

@@ -20,7 +20,7 @@ Start developing with the latest Angular features from our roadmap. This list re
 ### Available to experiment with
 
 * [Incremental hydration](/guide/incremental-hydration)
-* [Zoneless change detection](/guide/experimental/zoneless)
+* [Zoneless change detection](/guide/zoneless)
 * [Hydration support for i18n blocks](/api/platform-browser/withI18nSupport)
 * [Resource API](/guide/signals/resource)
 * [Effect API](/api/core/effect)

adev/test-main.ts

@@ -6,13 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ErrorHandler, NgModule, provideExperimentalZonelessChangeDetection} from '@angular/core';
+import {ErrorHandler, NgModule, provideZonelessChangeDetection} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {BrowserTestingModule, platformBrowserTesting} from '@angular/platform-browser/testing';
 
 @NgModule({
   providers: [
-    provideExperimentalZonelessChangeDetection(),
+    provideZonelessChangeDetection(),
     {
       provide: ErrorHandler,
       useValue: {

goldens/public-api/core/index.api.md

@@ -1459,9 +1459,6 @@ export function provideExperimentalCheckNoChangesForDebug(options: {
     exhaustive?: boolean;
 }): _angular_core.EnvironmentProviders;
 
-// @public
-export function provideExperimentalZonelessChangeDetection(): EnvironmentProviders;
-
 // @public
 export function providePlatformInitializer(initializerFn: () => void): EnvironmentProviders;
 
@@ -1474,6 +1471,11 @@ export type ProviderToken<T> = Type<T> | AbstractType<T> | InjectionToken<T>;
 // @public
 export function provideZoneChangeDetection(options?: NgZoneOptions): EnvironmentProviders;
 
+// @public
+function provideZonelessChangeDetection(): EnvironmentProviders;
+export { provideZonelessChangeDetection as provideExperimentalZonelessChangeDetection }
+export { provideZonelessChangeDetection }
+
 // @public
 export interface Query {
     // (undocumented)

modules/ssr-benchmarks/src/app/app.config.ts

@@ -6,13 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ApplicationConfig, provideExperimentalZonelessChangeDetection} from '@angular/core';
+import {ApplicationConfig, provideZonelessChangeDetection} from '@angular/core';
 
 import {provideClientHydration, withEventReplay} from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideExperimentalZonelessChangeDetection(),
-    provideClientHydration(withEventReplay()),
-  ],
+  providers: [provideZonelessChangeDetection(), provideClientHydration(withEventReplay())],
 };

packages/core/src/change_detection/scheduling/exhaustive_check_no_changes.ts

@@ -34,7 +34,7 @@ import {ZONELESS_ENABLED} from './zoneless_scheduling';
  *     and will always check all views, regardless of their "dirty" state and `ChangeDetectionStrategy`.
  *
  * When the `useNgZoneOnStable` option is `true`, this function will provide its own `NgZone` implementation and needs
- * to come after any other `NgZone` provider, including `provideZoneChangeDetection()` and `provideExperimentalZonelessChangeDetection()`.
+ * to come after any other `NgZone` provider, including `provideZoneChangeDetection()` and `provideZonelessChangeDetection()`.
  *
  * @experimental
  * @publicApi

packages/core/src/change_detection/scheduling/zoneless_scheduling.ts

@@ -69,7 +69,7 @@ export const ZONELESS_ENABLED = new InjectionToken<boolean>(
   {providedIn: 'root', factory: () => false},
 );
 
-/** Token used to indicate `provideExperimentalZonelessChangeDetection` was used. */
+/** Token used to indicate `provideZonelessChangeDetection` was used. */
 export const PROVIDED_ZONELESS = new InjectionToken<boolean>(
   typeof ngDevMode === 'undefined' || ngDevMode ? 'Zoneless provided' : '',
   {providedIn: 'root', factory: () => false},

packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts

@@ -361,7 +361,7 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
  * @usageNotes
  * ```ts
  * bootstrapApplication(MyApp, {providers: [
- *   provideExperimentalZonelessChangeDetection(),
+ *   provideZonelessChangeDetection(),
  * ]});
  * ```
  *
@@ -370,10 +370,10 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
  * on the exact API based on the feedback and our understanding of the problem and solution space.
  *
  * @publicApi
- * @experimental
+ * @developerPreview
  * @see {@link /api/platform-browser/bootstrapApplication bootstrapApplication}
  */
-export function provideExperimentalZonelessChangeDetection(): EnvironmentProviders {
+export function provideZonelessChangeDetection(): EnvironmentProviders {
   performanceMarkFeature('NgZoneless');
 
   if ((typeof ngDevMode === 'undefined' || ngDevMode) && typeof Zone !== 'undefined' && Zone) {

packages/core/src/core.ts

@@ -43,7 +43,11 @@ export {
   provideZoneChangeDetection,
   NgZoneOptions,
 } from './change_detection/scheduling/ng_zone_scheduling';
-export {provideExperimentalZonelessChangeDetection} from './change_detection/scheduling/zoneless_scheduling_impl';
+export {
+  provideZonelessChangeDetection,
+  // TODO(atscott): Remove after internal LSC for name change
+  provideZonelessChangeDetection as provideExperimentalZonelessChangeDetection,
+} from './change_detection/scheduling/zoneless_scheduling_impl';
 export {PendingTasks} from './pending_tasks';
 export {provideExperimentalCheckNoChangesForDebug} from './change_detection/scheduling/exhaustive_check_no_changes';
 export {enableProdMode, isDevMode} from './util/is_dev_mode';