feat(@schematics/angular): add option to setup new workspace or application as zoneless mode

Introduces option `--experimental-zoneless` to setup workspace or application as zoneless mode.

Author: aparzi

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

@@ -4,6 +4,7 @@
 import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule, {
+  <% if(experimental-zoneless) { %>providers: [provideExperimentalZonelessChangeDetection()],} %>
   ngZoneEventCoalescing: true<% if(!!viewEncapsulation) { %>,
   defaultEncapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } %>
 })

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

@@ -4,5 +4,7 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';<% } %>
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true })<% if (routing) { %>, provideRouter(routes)<% } %>]
+  providers: [
+  <% if(experimental-zoneless) { %>providers: [provideExperimentalZonelessChangeDetection()],} %>
+  provideZoneChangeDetection({ eventCoalescing: true })<% if (routing) { %>, provideRouter(routes)<% } %>]
 };

packages/schematics/angular/application/index.ts

@@ -25,7 +25,11 @@ import {
 } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import { Schema as ComponentOptions } from '../component/schema';
-import { NodeDependencyType, addPackageJsonDependency } from '../utility/dependencies';
+import {
+  NodeDependencyType,
+  addPackageJsonDependency,
+  removePackageJsonDependency,
+} from '../utility/dependencies';
 import { latestVersions } from '../utility/latest-versions';
 import { relativePathToWorkspaceRoot } from '../utility/paths';
 import { getWorkspace, updateWorkspace } from '../utility/workspace';
@@ -132,6 +136,9 @@ function addDependenciesToPackageJson(options: ApplicationOptions) {
     if (!options.skipInstall) {
       context.addTask(new NodePackageInstallTask());
     }
+    if (options.experimentalZoneless) {
+      removePackageJsonDependency(host, 'zone.js');
+    }
 
     return host;
   };
@@ -239,7 +246,7 @@ function addAppToWorkspaceFile(
           outputPath: `dist/${folderName}`,
           index: `${sourceRoot}/index.html`,
           browser: `${sourceRoot}/main.ts`,
-          polyfills: ['zone.js'],
+          polyfills: options.experimentalZoneless ? [] : ['zone.js'],
           tsConfig: `${projectRoot}tsconfig.app.json`,
           inlineStyleLanguage,
           assets: [{ 'glob': '**/*', 'input': `${projectRoot}public` }],
@@ -279,7 +286,7 @@ function addAppToWorkspaceFile(
         : {
             builder: Builders.Karma,
             options: {
-              polyfills: ['zone.js', 'zone.js/testing'],
+              polyfills: options.experimentalZoneless ? [] : ['zone.js', 'zone.js/testing'],
               tsConfig: `${projectRoot}tsconfig.spec.json`,
               inlineStyleLanguage,
               assets: [{ 'glob': '**/*', 'input': `${projectRoot}public` }],

packages/schematics/angular/application/schema.json

@@ -117,6 +117,11 @@
       "type": "boolean",
       "default": false,
       "x-user-analytics": "ep.ng_ssr"
+    },
+    "experimentalZoneless": {
+      "description": "Create an application without dependencies related to zone.js (zoneless)",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["name"]

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

@@ -39,6 +39,7 @@ export default function (options: NgNewOptions): Rule {
     minimal: options.minimal,
     strict: options.strict,
     packageManager: options.packageManager,
+    experimentalZoneless: options.experimentalZoneless,
   };
   const applicationOptions: ApplicationOptions = {
     projectRoot: '',
@@ -57,6 +58,7 @@ export default function (options: NgNewOptions): Rule {
     minimal: options.minimal,
     standalone: options.standalone,
     ssr: options.ssr,
+    experimentalZoneless: options.experimentalZoneless,
   };
 
   return chain([

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

@@ -138,6 +138,11 @@
       "description": "Creates an application with Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) enabled.",
       "type": "boolean",
       "x-user-analytics": "ep.ng_ssr"
+    },
+    "experimentalZoneless": {
+      "description": "Create an application without dependencies related to zone.js (zoneless)",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["name", "version"]

packages/schematics/angular/workspace/schema.json

@@ -41,6 +41,11 @@
       "description": "The package manager used to install dependencies.",
       "type": "string",
       "enum": ["npm", "yarn", "pnpm", "cnpm", "bun"]
+    },
+    "experimentalZoneless": {
+      "description": "Create an application without dependencies related to zone.js (zoneless)",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["name", "version"]