feat(@schematics/angular): Applications are zoneless by default

This change updates applications to omit the ZoneJS dependency by
default. It depends on angular/angular#62655,
which allows us to also exclude the `provideZonelessChangeDetection`
provider.

Author: atscott

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

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

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

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

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

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

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

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

packages/schematics/angular/application/index_spec.ts

@@ -296,7 +296,7 @@ describe('Application Schematic', () => {
       expect(pkg.devDependencies['less']).toEqual(latestVersions['less']);
     });
 
-    it('should include zone.js if "zoneless" option is not present', async () => {
+    it('should _not_ include zone.js if "zoneless" option is not present', async () => {
       const tree = await schematicRunner.runSchematic(
         'application',
         {
@@ -307,7 +307,7 @@ describe('Application Schematic', () => {
       );
 
       const pkg = JSON.parse(tree.readContent('/package.json'));
-      expect(pkg.dependencies['zone.js']).toEqual(latestVersions['zone.js']);
+      expect(pkg.dependencies['zone.js']).toBeUndefined();
     });
 
     it('should not include zone.js if "zoneless" option is true', async () => {
@@ -800,7 +800,7 @@ describe('Application Schematic', () => {
       );
     });
 
-    it('should add provideZonelessChangeDetection() in app-module.ts when zoneless is true', async () => {
+    it('should not add provideZonelessChangeDetection() in app-module.ts when zoneless is true', async () => {
       const tree = await schematicRunner.runSchematic(
         'application',
         {
@@ -812,53 +812,10 @@ describe('Application Schematic', () => {
       );
       const path = '/projects/foo/src/app/app-module.ts';
       const fileContent = tree.readContent(path);
-      expect(fileContent).toContain('provideZonelessChangeDetection()');
-    });
-
-    it('should not add provideZonelessChangeDetection() in app-module.ts when zoneless is false', async () => {
-      const tree = await schematicRunner.runSchematic(
-        'application',
-        {
-          ...defaultOptions,
-          zoneless: false,
-          standalone: false,
-        },
-        workspaceTree,
-      );
-      const path = '/projects/foo/src/app/app-module.ts';
-      const fileContent = tree.readContent(path);
-      expect(fileContent).not.toContain('provideZonelessChangeDetection()');
-    });
-
-    it('should add provideZonelessChangeDetection() when zoneless is true', async () => {
-      const tree = await schematicRunner.runSchematic(
-        'application',
-        {
-          ...defaultOptions,
-          zoneless: true,
-        },
-        workspaceTree,
-      );
-      const path = '/projects/foo/src/app/app.config.ts';
-      const fileContent = tree.readContent(path);
-      expect(fileContent).toContain('provideZonelessChangeDetection()');
-    });
-
-    it('should not add provideZonelessChangeDetection() when zoneless is false', async () => {
-      const tree = await schematicRunner.runSchematic(
-        'application',
-        {
-          ...defaultOptions,
-          zoneless: false,
-        },
-        workspaceTree,
-      );
-      const path = '/projects/foo/src/app/app.config.ts';
-      const fileContent = tree.readContent(path);
       expect(fileContent).not.toContain('provideZonelessChangeDetection()');
     });
 
-    it('should not add provideZoneChangeDetection when zoneless is true', async () => {
+    it('should not add any change detection provider when zoneless is true', async () => {
       const tree = await schematicRunner.runSchematic(
         'application',
         {
@@ -869,7 +826,7 @@ describe('Application Schematic', () => {
       );
       const path = '/projects/foo/src/app/app.config.ts';
       const fileContent = tree.readContent(path);
-      expect(fileContent).not.toContain('provideZoneChangeDetection');
+      expect(fileContent).not.toMatch(/provideZone(less)?ChangeDetection/gi);
     });
   });
 });

packages/schematics/angular/application/schema.json

@@ -120,9 +120,8 @@
     },
     "zoneless": {
       "description": "Generate an application that does not use `zone.js`.",
-      "x-prompt": "Do you want to create a 'zoneless' application without zone.js (Developer Preview)?",
       "type": "boolean",
-      "default": false
+      "default": true
     }
   },
   "required": ["name"]

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

@@ -141,9 +141,8 @@
     },
     "zoneless": {
       "description": "Create an initial application that does not utilize `zone.js`.",
-      "x-prompt": "Do you want to create a 'zoneless' application without zone.js (Developer Preview)?",
       "type": "boolean",
-      "default": false
+      "default": true
     }
   },
   "required": ["name", "version"]

tests/legacy-cli/e2e/tests/generate/application/application-basic.ts

@@ -3,7 +3,7 @@ import { ng } from '../../../utils/process';
 import { useCIChrome } from '../../../utils/project';
 
 export default function () {
-  return ng('generate', 'application', 'app2')
+  return ng('generate', 'application', 'app2', '--no-zoneless')
     .then(() => expectFileToMatch('angular.json', /\"app2\":/))
     .then(() => useCIChrome('app2', 'projects/app2'))
     .then(() => ng('test', 'app2', '--watch=false'));

tests/legacy-cli/e2e/tests/generate/application/application-zoneless.ts

@@ -2,12 +2,12 @@ import { ng } from '../../../utils/process';
 import { useCIChrome } from '../../../utils/project';
 
 export default async function () {
-  await ng('generate', 'app', 'standalone', '--zoneless', '--standalone');
+  await ng('generate', 'app', 'standalone', '--standalone');
   await useCIChrome('standalone', 'projects/standalone');
   await ng('test', 'standalone', '--watch=false');
   await ng('build', 'standalone');
 
-  await ng('generate', 'app', 'ngmodules', '--zoneless', '--no-standalone', '--skip-install');
+  await ng('generate', 'app', 'ngmodules', '--no-standalone', '--skip-install');
   await useCIChrome('ngmodules', 'projects/ngmodules');
   await ng('test', 'ngmodules', '--watch=false');
   await ng('build', 'ngmodules');