feat(@angular-devkit/build-angular): move Vite-based dev-server for application builder to new build system package

With the `application` builder already within the new `@angular/build` package,
the Vite-based `dev-server` builder is now also contained within this package.
Only the Vite-based aspects of the `dev-server` have been moved and only the
support for the `application` builder. The compatibility builder `browser-esbuild`
is not supported with `@angular/build:dev-server`. The existing `dev-server` builder
found within `@angular-devkit/build-angular` should continue to be used for both the
Webpack-based `browser` builder and the esbuild-based compatibility `browser-esbuild`
builder. To maintain backwards compatibility, the existing `@angular-devkit/build-angular:dev-server`
builder continues to support builders it has previously.

No change to existing applications is required.

Author: clydin

goldens/public-api/angular/build/index.md

@@ -8,6 +8,7 @@
 
 import { BuilderContext } from '@angular-devkit/architect';
 import { BuilderOutput } from '@angular-devkit/architect';
+import type http from 'node:http';
 import { OutputFile } from 'esbuild';
 import type { Plugin as Plugin_2 } from 'esbuild';
 
@@ -107,6 +108,51 @@ export enum BuildOutputFileType {
     Server = 3
 }
 
+// @public
+export interface DevServerBuilderOptions {
+    allowedHosts?: string[];
+    // @deprecated
+    browserTarget?: string;
+    buildTarget?: string;
+    disableHostCheck?: boolean;
+    forceEsbuild?: boolean;
+    headers?: {
+        [key: string]: string;
+    };
+    hmr?: boolean;
+    host?: string;
+    liveReload?: boolean;
+    open?: boolean;
+    poll?: number;
+    port?: number;
+    prebundle?: PrebundleUnion;
+    proxyConfig?: string;
+    publicHost?: string;
+    servePath?: string;
+    ssl?: boolean;
+    sslCert?: string;
+    sslKey?: string;
+    verbose?: boolean;
+    watch?: boolean;
+}
+
+// @public
+export interface DevServerBuilderOutput extends BuilderOutput {
+    // (undocumented)
+    address?: string;
+    // (undocumented)
+    baseUrl: string;
+    // (undocumented)
+    port?: number;
+}
+
+// @public
+export function executeDevServerBuilder(options: DevServerBuilderOptions, context: BuilderContext, extensions?: {
+    buildPlugins?: Plugin_2[];
+    middleware?: ((req: http.IncomingMessage, res: http.ServerResponse, next: (err?: unknown) => void) => void)[];
+    indexHtmlTransformer?: IndexHtmlTransform;
+}): AsyncIterable<DevServerBuilderOutput>;
+
 // (No @packageDocumentation comment for this package)
 
 ```

goldens/public-api/angular_devkit/build_angular/index.md

@@ -12,6 +12,7 @@ import { BuilderContext } from '@angular-devkit/architect';
 import { BuilderOutput } from '@angular-devkit/architect';
 import type { ConfigOptions } from 'karma';
 import { Configuration } from 'webpack';
+import { DevServerBuilderOutput } from '@angular/build';
 import type http from 'node:http';
 import { IndexHtmlTransform } from '@angular/build/private';
 import { json } from '@angular-devkit/core';
@@ -142,15 +143,7 @@ export interface DevServerBuilderOptions {
     watch?: boolean;
 }
 
-// @public
-export interface DevServerBuilderOutput extends BuilderOutput {
-    // (undocumented)
-    address?: string;
-    // (undocumented)
-    baseUrl: string;
-    // (undocumented)
-    port?: number;
-}
+export { DevServerBuilderOutput }
 
 // @public
 export function executeBrowserBuilder(options: BrowserBuilderOptions, context: BuilderContext, transforms?: {

packages/angular/build/BUILD.bazel

@@ -12,6 +12,11 @@ ts_json_schema(
     src = "src/builders/application/schema.json",
 )
 
+ts_json_schema(
+    name = "dev-server_schema",
+    src = "src/builders/dev-server/schema.json",
+)
+
 ts_library(
     name = "build",
     package_name = "@angular/build",
@@ -28,6 +33,7 @@ ts_library(
         ],
     ) + [
         "//packages/angular/build:src/builders/application/schema.ts",
+        "//packages/angular/build:src/builders/dev-server/schema.ts",
     ],
     data = glob(
         include = [
@@ -57,18 +63,21 @@ ts_library(
         "@npm//@babel/helper-split-export-declaration",
         "@npm//@types/babel__core",
         "@npm//@types/browserslist",
+        "@npm//@types/inquirer",
         "@npm//@types/less",
         "@npm//@types/node",
         "@npm//@types/picomatch",
         "@npm//@types/semver",
         "@npm//@types/watchpack",
+        "@npm//@vitejs/plugin-basic-ssl",
         "@npm//ansi-colors",
         "@npm//autoprefixer",
         "@npm//browserslist",
         "@npm//critters",
         "@npm//esbuild",
         "@npm//fast-glob",
         "@npm//https-proxy-agent",
+        "@npm//inquirer",
         "@npm//less",
         "@npm//magic-string",
         "@npm//mrmime",
@@ -81,6 +90,7 @@ ts_library(
         "@npm//tslib",
         "@npm//typescript",
         "@npm//undici",
+        "@npm//vite",
         "@npm//watchpack",
     ],
 )
@@ -132,6 +142,11 @@ ts_library(
         "//packages/angular_devkit/core",
         "//packages/angular_devkit/core/node",
 
+        # dev server only test deps
+        "@npm//@types/http-proxy",
+        "@npm//http-proxy",
+        "@npm//puppeteer",
+
         # Base dependencies for the application in hello-world-app.
         "@npm//@angular/common",
         "@npm//@angular/compiler",

packages/angular/build/builders.json

@@ -1,9 +1,14 @@
 {
   "builders": {
     "application": {
-      "implementation": "./src/builders/application",
+      "implementation": "./src/builders/application/index",
       "schema": "./src/builders/application/schema.json",
       "description": "Build an application."
+    },
+    "dev-server": {
+      "implementation": "./src/builders/dev-server/index",
+      "schema": "./src/builders/dev-server/schema.json",
+      "description": "Execute a development server for an application."
     }
   }
 }

packages/angular/build/package.json

@@ -23,11 +23,13 @@
     "@babel/core": "7.24.4",
     "@babel/helper-annotate-as-pure": "7.22.5",
     "@babel/helper-split-export-declaration": "7.22.6",
+    "@vitejs/plugin-basic-ssl": "1.1.0",
     "browserslist": "^4.23.0",
     "critters": "0.0.22",
     "esbuild": "0.20.2",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.4",
+    "inquirer": "9.2.19",
     "less": "4.2.0",
     "magic-string": "0.30.10",
     "mrmime": "2.0.0",
@@ -38,6 +40,7 @@
     "sass": "1.75.0",
     "semver": "7.6.0",
     "undici": "6.13.0",
+    "vite": "5.2.10",
     "watchpack": "2.4.1"
   },
   "peerDependencies": {

packages/angular/build/src/builders/dev-server/builder.ts

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import type { BuilderContext } from '@angular-devkit/architect';
+import type { Plugin } from 'esbuild';
+import type http from 'node:http';
+import { checkPort } from '../../utils/check-port';
+import {
+  type IndexHtmlTransform,
+  buildApplicationInternal,
+  purgeStaleBuildCache,
+} from './internal';
+import { normalizeOptions } from './options';
+import type { DevServerBuilderOutput } from './output';
+import type { Schema as DevServerBuilderOptions } from './schema';
+import { serveWithVite } from './vite-server';
+
+/**
+ * A Builder that executes a development server based on the provided browser target option.
+ *
+ * Usage of the `transforms` and/or `extensions` parameters is NOT supported and may cause
+ * unexpected build output or build failures.
+ *
+ * @param options Dev Server options.
+ * @param context The build context.
+ * @param extensions An optional object containing an array of build plugins (esbuild-based)
+ * and/or HTTP request middleware.
+ *
+ * @experimental Direct usage of this function is considered experimental.
+ */
+export async function* execute(
+  options: DevServerBuilderOptions,
+  context: BuilderContext,
+  extensions?: {
+    buildPlugins?: Plugin[];
+    middleware?: ((
+      req: http.IncomingMessage,
+      res: http.ServerResponse,
+      next: (err?: unknown) => void,
+    ) => void)[];
+    indexHtmlTransformer?: IndexHtmlTransform;
+  },
+): AsyncIterable<DevServerBuilderOutput> {
+  // Determine project name from builder context target
+  const projectName = context.target?.project;
+  if (!projectName) {
+    context.logger.error(`The "dev-server" builder requires a target to be specified.`);
+
+    return;
+  }
+
+  const { builderName, normalizedOptions } = await initialize(options, projectName, context);
+
+  // Warn if the initial options provided by the user enable prebundling but caching is disabled
+  if (options.prebundle && !normalizedOptions.cacheOptions.enabled) {
+    context.logger.warn(
+      `Prebundling has been configured but will not be used because caching has been disabled.`,
+    );
+  }
+
+  yield* serveWithVite(
+    normalizedOptions,
+    builderName,
+    (options, context, plugins) =>
+      buildApplicationInternal(options, context, { write: false }, { codePlugins: plugins }),
+    context,
+    { indexHtml: extensions?.indexHtmlTransformer },
+    extensions,
+  );
+}
+
+async function initialize(
+  initialOptions: DevServerBuilderOptions,
+  projectName: string,
+  context: BuilderContext,
+) {
+  // Purge old build disk cache.
+  await purgeStaleBuildCache(context);
+
+  const normalizedOptions = await normalizeOptions(context, projectName, initialOptions);
+  const builderName = await context.getBuilderNameForTarget(normalizedOptions.buildTarget);
+
+  if (
+    !normalizedOptions.disableHostCheck &&
+    !/^127\.\d+\.\d+\.\d+/g.test(normalizedOptions.host) &&
+    normalizedOptions.host !== 'localhost'
+  ) {
+    context.logger.warn(`
+Warning: This is a simple server for use in testing or debugging Angular applications
+locally. It hasn't been reviewed for security issues.
+
+Binding this server to an open connection can result in compromising your application or
+computer. Using a different host than the one passed to the "--host" flag might result in
+websocket connection issues. You might need to use "--disable-host-check" if that's the
+case.
+    `);
+  }
+
+  if (normalizedOptions.disableHostCheck) {
+    context.logger.warn(
+      'Warning: Running a server with --disable-host-check is a security risk. ' +
+        'See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.',
+    );
+  }
+
+  normalizedOptions.port = await checkPort(normalizedOptions.port, normalizedOptions.host);
+
+  return {
+    builderName,
+    normalizedOptions,
+  };
+}

packages/angular/build/src/builders/dev-server/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { createBuilder } from '@angular-devkit/architect';
+import { execute } from './builder';
+import { DevServerBuilderOutput } from './output';
+import { Schema as DevServerBuilderOptions } from './schema';
+
+export { DevServerBuilderOptions, DevServerBuilderOutput, execute as executeDevServerBuilder };
+export default createBuilder<DevServerBuilderOptions, DevServerBuilderOutput>(execute);
+
+// Temporary export to support specs
+export { execute as executeDevServer };

packages/angular/build/src/builders/dev-server/internal.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export { BuildOutputFile, BuildOutputFileType } from '@angular/build';
+export { createRxjsEsmResolutionPlugin } from '../../tools/esbuild/rxjs-esm-resolution-plugin';
+export { JavaScriptTransformer } from '../../tools/esbuild/javascript-transformer';
+export { getFeatureSupport, isZonelessApp } from '../../tools/esbuild/utils';
+export { renderPage } from '../../utils/server-rendering/render-page';
+export { type IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
+export { purgeStaleBuildCache } from '../../utils/purge-cache';
+export { getSupportedBrowsers } from '../../utils/supported-browsers';
+export { transformSupportedBrowsersToTargets } from '../../tools/esbuild/utils';
+export { buildApplicationInternal } from '../../builders/application';
+export { ApplicationBuilderInternalOptions } from '../../builders/application/options';
+export { ExternalResultMetadata } from '../../tools/esbuild/bundler-execution-result';