Remove "experimental" from zoneless and add prompt for new apps

packages/angular/ssr/test/testing-utils.ts

@@ -11,7 +11,7 @@ import {
   EnvironmentProviders,
   Provider,
   Type,
-  provideExperimentalZonelessChangeDetection,
+  provideZonelessChangeDetection,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouterOutlet, Routes, provideRouter } from '@angular/router';
@@ -93,7 +93,7 @@ export function setAngularAppTestingManifest(
     bootstrap: async () => () => {
       return bootstrapApplication(rootComponent, {
         providers: [
-          provideExperimentalZonelessChangeDetection(),
+          provideZonelessChangeDetection(),
           provideRouter(routes),
           provideServerRendering(withRoutes(serverRoutes)),
           ...extraProviders,

packages/schematics/angular/application/files/module-files/src/app/app.module.ts.template

@@ -1,4 +1,4 @@
-import { NgModule<% if(experimentalZoneless) { %>, provideExperimentalZonelessChangeDetection<% } %> } from '@angular/core';
+import { NgModule<% if(zoneless) { %>, provideZonelessChangeDetection<% } %> } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 <% if (routing) { %>
 import { AppRoutingModule } from './app-routing.module';<% } %>
@@ -12,7 +12,7 @@ import { App } from './app';
     BrowserModule<% if (routing) { %>,
     AppRoutingModule<% } %>
   ],
-  providers: [<% if (experimentalZoneless) { %>provideExperimentalZonelessChangeDetection()<% } %>],
+  providers: [<% if (zoneless) { %>provideZonelessChangeDetection()<% } %>],
   bootstrap: [App]
 })
 export class AppModule { }

packages/schematics/angular/application/files/module-files/src/app/app.spec.ts.template

@@ -1,4 +1,4 @@
-<% if(experimentalZoneless) { %>import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+<% if(zoneless) { %>import { provideZonelessChangeDetection } from '@angular/core';
 <% } %>import { TestBed } from '@angular/core/testing';<% if (routing) { %>
 import { RouterModule } from '@angular/router';<% } %>
 import { App } from './app';
@@ -11,8 +11,8 @@ describe('App', () => {
       ],<% } %>
       declarations: [
         App
-      ],<% if(experimentalZoneless) { %>
-      providers: [provideExperimentalZonelessChangeDetection()]<% } %>
+      ],<% if(zoneless) { %>
+      providers: [provideZonelessChangeDetection()]<% } %>
     }).compileComponents();
   });
 

packages/schematics/angular/application/files/module-files/src/main.ts.template

@@ -3,7 +3,7 @@
 import { AppModule } from './app/app.module';
 
 platformBrowser().bootstrapModule(AppModule, {
-  <% if(!experimentalZoneless) { %>ngZoneEventCoalescing: true,<% } %><% if(!!viewEncapsulation) { %>
+  <% if(!zoneless) { %>ngZoneEventCoalescing: true,<% } %><% if(!!viewEncapsulation) { %>
   defaultEncapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } %>
 })
   .catch(err => console.error(err));

packages/schematics/angular/application/files/standalone-files/src/app/app.config.ts.template

@@ -1,8 +1,8 @@
-import { ApplicationConfig, <% if(!experimentalZoneless) { %>provideZoneChangeDetection<% } else { %>provideExperimentalZonelessChangeDetection<% } %> } from '@angular/core';<% if (routing) { %>
+import { ApplicationConfig, <% if(!zoneless) { %>provideZoneChangeDetection<% } else { %>provideZonelessChangeDetection<% } %> } from '@angular/core';<% if (routing) { %>
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';<% } %>
 
 export const appConfig: ApplicationConfig = {
-  providers: [<% if(experimentalZoneless) { %>provideExperimentalZonelessChangeDetection()<% } else { %>provideZoneChangeDetection({ eventCoalescing: true })<% } %><% if (routing) {%>, provideRouter(routes)<% } %>]
+  providers: [<% if(zoneless) { %>provideZonelessChangeDetection()<% } else { %>provideZoneChangeDetection({ eventCoalescing: true })<% } %><% if (routing) {%>, provideRouter(routes)<% } %>]
 };

packages/schematics/angular/application/files/standalone-files/src/app/app.spec.ts.template

@@ -1,12 +1,12 @@
-<% if(experimentalZoneless) { %>import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+<% if(zoneless) { %>import { provideZonelessChangeDetection } from '@angular/core';
 <% } %>import { TestBed } from '@angular/core/testing';
 import { App } from './app';
 
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [App],<% if(experimentalZoneless) { %>
-      providers: [provideExperimentalZonelessChangeDetection()]<% } %>
+      imports: [App],<% if(zoneless) { %>
+      providers: [provideZonelessChangeDetection()]<% } %>
     }).compileComponents();
   });
 

packages/schematics/angular/application/index.ts

@@ -238,7 +238,7 @@ function addAppToWorkspaceFile(
         options: {
           index: `${sourceRoot}/index.html`,
           browser: `${sourceRoot}/main.ts`,
-          polyfills: options.experimentalZoneless ? [] : ['zone.js'],
+          polyfills: options.zoneless ? [] : ['zone.js'],
           tsConfig: `${projectRoot}tsconfig.app.json`,
           inlineStyleLanguage,
           assets: [{ 'glob': '**/*', 'input': `${projectRoot}public` }],
@@ -277,7 +277,7 @@ function addAppToWorkspaceFile(
         : {
             builder: Builders.BuildKarma,
             options: {
-              polyfills: options.experimentalZoneless ? [] : ['zone.js', 'zone.js/testing'],
+              polyfills: options.zoneless ? [] : ['zone.js', 'zone.js/testing'],
               tsConfig: `${projectRoot}tsconfig.spec.json`,
               inlineStyleLanguage,
               assets: [{ 'glob': '**/*', 'input': `${projectRoot}public` }],

packages/schematics/angular/application/index_spec.ts

@@ -696,70 +696,70 @@ describe('Application Schematic', () => {
       );
     });
 
-    it('should add provideExperimentalZonelessChangeDetection() in app.module.ts when experimentalZoneless is true', async () => {
+    it('should add provideZonelessChangeDetection() in app.module.ts when zoneless is true', async () => {
       const tree = await schematicRunner.runSchematic(
         'application',
         {
           ...defaultOptions,
-          experimentalZoneless: true,
+          zoneless: true,
           standalone: false,
         },
         workspaceTree,
       );
       const path = '/projects/foo/src/app/app.module.ts';
       const fileContent = tree.readContent(path);
-      expect(fileContent).toContain('provideExperimentalZonelessChangeDetection()');
+      expect(fileContent).toContain('provideZonelessChangeDetection()');
     });
 
-    it('should not add provideExperimentalZonelessChangeDetection() in app.module.ts when experimentalZoneless is false', async () => {
+    it('should not add provideZonelessChangeDetection() in app.module.ts when zoneless is false', async () => {
       const tree = await schematicRunner.runSchematic(
         'application',
         {
           ...defaultOptions,
-          experimentalZoneless: false,
+          zoneless: false,
           standalone: false,
         },
         workspaceTree,
       );
       const path = '/projects/foo/src/app/app.module.ts';
       const fileContent = tree.readContent(path);
-      expect(fileContent).not.toContain('provideExperimentalZonelessChangeDetection()');
+      expect(fileContent).not.toContain('provideZonelessChangeDetection()');
     });
 
-    it('should add provideExperimentalZonelessChangeDetection() when experimentalZoneless is true', async () => {
+    it('should add provideZonelessChangeDetection() when zoneless is true', async () => {
       const tree = await schematicRunner.runSchematic(
         'application',
         {
           ...defaultOptions,
-          experimentalZoneless: true,
+          zoneless: true,
         },
         workspaceTree,
       );
       const path = '/projects/foo/src/app/app.config.ts';
       const fileContent = tree.readContent(path);
-      expect(fileContent).toContain('provideExperimentalZonelessChangeDetection()');
+      expect(fileContent).toContain('provideZonelessChangeDetection()');
     });
 
-    it('should not add provideExperimentalZonelessChangeDetection() when experimentalZoneless is false', async () => {
+    it('should not add provideZonelessChangeDetection() when zoneless is false', async () => {
       const tree = await schematicRunner.runSchematic(
         'application',
         {
           ...defaultOptions,
-          experimentalZoneless: false,
+          zoneless: false,
         },
         workspaceTree,
       );
       const path = '/projects/foo/src/app/app.config.ts';
       const fileContent = tree.readContent(path);
-      expect(fileContent).not.toContain('provideExperimentalZonelessChangeDetection()');
+      expect(fileContent).not.toContain('provideZonelessChangeDetection()');
     });
 
-    it('should not add provideZoneChangeDetection when experimentalZoneless is true', async () => {
+    it('should not add provideZoneChangeDetection when zoneless is true', async () => {
       const tree = await schematicRunner.runSchematic(
         'application',
         {
           ...defaultOptions,
-          experimentalZoneless: true,
+          zoneless: true,
         },
         workspaceTree,
       );

packages/schematics/angular/application/schema.json

@@ -118,8 +118,9 @@
       "default": false,
       "x-user-analytics": "ep.ng_ssr"
     },
-    "experimentalZoneless": {
+    "zoneless": {
       "description": "Generate an application that does not use `zone.js`.",
+      "x-prompt": "Do you want to create the application without zone.js (zoneless)?",
       "type": "boolean",
       "default": false
     }

packages/schematics/angular/ng-new/index.ts

@@ -57,7 +57,7 @@ export default function (options: NgNewOptions): Rule {
     minimal: options.minimal,
     standalone: options.standalone,
     ssr: options.ssr,
-    experimentalZoneless: options.experimentalZoneless,
+    zoneless: options.zoneless,
   };
 
   return chain([

packages/schematics/angular/ng-new/schema.json

@@ -139,7 +139,7 @@
       "type": "boolean",
       "x-user-analytics": "ep.ng_ssr"
     },
-    "experimentalZoneless": {
+    "zoneless": {
       "description": "Create an initial application that does not utilize `zone.js`.",
       "type": "boolean",
       "default": false

tests/legacy-cli/e2e/tests/build/wasm-esm.ts

@@ -65,12 +65,12 @@ export default async function () {
   await replaceInFile(
     'src/app/app.config.ts',
     'provideZoneChangeDetection',
-    'provideExperimentalZonelessChangeDetection',
+    'provideZonelessChangeDetection',
   );
   await replaceInFile(
     'src/app/app.config.ts',
     'provideZoneChangeDetection({ eventCoalescing: true })',
-    'provideExperimentalZonelessChangeDetection()',
+    'provideZonelessChangeDetection()',
   );
 
   await ng('build');