feat(@angular/build): add library builder

Add a new native `@angular/build:library` builder providing a modern, high-performance compilation and packaging pipeline.

Author: alan-agius4

modules/testing/builder/src/builder-harness.ts

@@ -111,7 +111,7 @@ export class BuilderHarness<T> {
     }
   }
 
-  private resolvePath(path: string): string {
+  resolvePath(path: string): string {
     return join(getSystemPath(this.host.root()), path);
   }
 

packages/angular/build/BUILD.bazel

@@ -24,6 +24,11 @@ ts_json_schema(
     src = "src/builders/extract-i18n/schema.json",
 )
 
+ts_json_schema(
+    name = "library_schema",
+    src = "src/builders/library/schema.json",
+)
+
 ts_json_schema(
     name = "ng_karma_schema",
     src = "src/builders/karma/schema.json",
@@ -72,6 +77,7 @@ ts_project(
         "//packages/angular/build:src/builders/dev-server/schema.ts",
         "//packages/angular/build:src/builders/extract-i18n/schema.ts",
         "//packages/angular/build:src/builders/karma/schema.ts",
+        "//packages/angular/build:src/builders/library/schema.ts",
         "//packages/angular/build:src/builders/ng-packagr/schema.ts",
         "//packages/angular/build:src/builders/unit-test/schema.ts",
     ],
@@ -104,6 +110,7 @@ ts_project(
         ":node_modules/piscina",
         ":node_modules/postcss",
         ":node_modules/rolldown",
+        ":node_modules/rolldown-plugin-dts",
         ":node_modules/rollup",
         ":node_modules/sass",
         ":node_modules/sass-embedded",
@@ -286,6 +293,32 @@ ts_project(
     ],
 )
 
+ts_project(
+    name = "library_integration_test_lib",
+    testonly = True,
+    srcs = glob(include = ["src/builders/library/tests/**/*.ts"]),
+    deps = [
+        ":build",
+        "//packages/angular/build/private",
+        "//modules/testing/builder",
+        ":node_modules/@angular-devkit/architect",
+        ":node_modules/@angular-devkit/core",
+        "//:node_modules/@types/node",
+
+        # Base dependencies for the library in hello-world-lib.
+        "//:node_modules/@angular/common",
+        "//:node_modules/@angular/compiler",
+        "//:node_modules/@angular/compiler-cli",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/platform-browser",
+        "//:node_modules/@angular/router",
+        ":node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//:node_modules/typescript",
+        "//:node_modules/zone.js",
+    ],
+)
+
 jasmine_test(
     name = "application_integration_tests",
     size = "medium",
@@ -327,6 +360,13 @@ jasmine_test(
     shard_count = 5,
 )
 
+jasmine_test(
+    name = "library_integration_tests",
+    size = "medium",
+    data = [":library_integration_test_lib"],
+    shard_count = 4,
+)
+
 genrule(
     name = "license",
     srcs = ["//:LICENSE"],

packages/angular/build/builders.json

@@ -20,6 +20,11 @@
       "schema": "./src/builders/karma/schema.json",
       "description": "Run Karma unit tests."
     },
+    "library": {
+      "implementation": "./src/builders/library/index",
+      "schema": "./src/builders/library/schema.json",
+      "description": "Build an Angular library package conforming to the Angular Package Format (APF)."
+    },
     "ng-packagr": {
       "implementation": "./src/builders/ng-packagr/index",
       "schema": "./src/builders/ng-packagr/schema.json",

packages/angular/build/package.json

@@ -38,6 +38,7 @@
     "picomatch": "4.0.7",
     "piscina": "5.3.2",
     "rolldown": "1.2.8",
+    "rolldown-plugin-dts": "0.28.5",
     "sass": "1.104.1",
     "sass-embedded": "1.104.1",
     "semver": "7.8.5",

packages/angular/build/src/builders/application/build-action.ts

@@ -7,8 +7,6 @@
  */
 
 import { BuilderContext } from '@angular-devkit/architect';
-import { existsSync } from 'node:fs';
-import path from 'node:path';
 import {
   BuildOutputAsset,
   ExecutionResult,
@@ -21,10 +19,8 @@ import {
 } from '../../tools/esbuild/stylesheets/sass-language';
 import { logMessages, withNoProgress, withSpinner } from '../../tools/esbuild/utils';
 import { ChangedFiles } from '../../tools/esbuild/watcher';
-import { shouldWatchRoot } from '../../utils/environment-options';
 import { initializeHash } from '../../utils/hash';
 import { NormalizedCachedOptions } from '../../utils/normalize-cache';
-import { toPosixPath } from '../../utils/path';
 import { NormalizedApplicationBuildOptions, NormalizedOutputOptions } from './options';
 import {
   ComponentUpdateResult,
@@ -35,20 +31,6 @@ import {
   ResultMessage,
 } from './results';
 
-// Watch workspace for package manager changes
-const packageWatchFiles = [
-  // manifest can affect module resolution
-  'package.json',
-  // npm lock file
-  'package-lock.json',
-  // pnpm lock file
-  'pnpm-lock.yaml',
-  // yarn lock file including Yarn PnP manifest files (https://yarnpkg.com/advanced/pnp-spec/)
-  'yarn.lock',
-  '.pnp.cjs',
-  '.pnp.data.json',
-];
-
 // eslint-disable-next-line max-lines-per-function
 export async function* runEsBuildBuildAction(
   action: (rebuildState?: RebuildState) => Promise<ExecutionResult>,
@@ -115,55 +97,18 @@ export async function* runEsBuildBuildAction(
         logger.info('Watch mode enabled. Watching for file changes...');
       }
 
-      const normalizedOutputBase = toPosixPath(outputOptions.base);
-      const normalizedCacheBase = toPosixPath(cacheOptions.basePath);
-      const ignored: string[] = [
-        // Ignore the output and cache paths to avoid infinite rebuild cycles
-        normalizedOutputBase,
-        `${normalizedOutputBase}/**`,
-        normalizedCacheBase,
-        `${normalizedCacheBase}/**`,
-        `${toPosixPath(workspaceRoot)}/**/.*/**`,
-      ];
-
-      if (cacheOptions.localBasePath && cacheOptions.localBasePath !== cacheOptions.basePath) {
-        const normalizedLocalCacheBase = toPosixPath(cacheOptions.localBasePath);
-        ignored.push(normalizedLocalCacheBase, `${normalizedLocalCacheBase}/**`);
-      }
-
       // Setup a watcher
-      const { createWatcher } = await import('../../tools/esbuild/watcher');
-      watcher = await createWatcher({
-        polling: typeof poll === 'number',
-        interval: poll,
-        followSymlinks: preserveSymlinks,
-        ignored,
-        cwd: workspaceRoot,
+      const { setupWatcher } = await import('../../tools/esbuild/watcher');
+      watcher = await setupWatcher({
+        workspaceRoot,
+        projectRoot,
+        outputPath: outputOptions.base,
+        cacheOptions,
+        poll,
+        preserveSymlinks,
+        signal: options.signal,
+        watchFiles: result.watchFiles,
       });
-
-      // Setup abort support
-      options.signal?.addEventListener('abort', () => void watcher?.close());
-
-      // Watch the entire project root if 'NG_BUILD_WATCH_ROOT' environment variable is set
-      if (shouldWatchRoot) {
-        if (!preserveSymlinks) {
-          // Ignore all node modules directories to avoid excessive file watchers.
-          // Package changes are handled below by watching manifest and lock files.
-          // NOTE: this is not enable when preserveSymlinks is true as this would break `npm link` usages.
-          ignored.push('**/node_modules/**');
-
-          watcher.add(
-            packageWatchFiles
-              .map((file) => path.join(workspaceRoot, file))
-              .filter((file) => existsSync(file)),
-          );
-        }
-
-        watcher.add(projectRoot);
-      }
-
-      // Watch locations provided by the initial build result
-      watcher.add(result.watchFiles);
     }
 
     // Output the first build results after setting up the watcher to ensure that any code executed

packages/angular/build/src/builders/application/options.ts

@@ -9,7 +9,6 @@
 import type { BuilderContext } from '@angular-devkit/architect';
 import type { Plugin } from 'esbuild';
 import { access, constants, readFile } from 'node:fs/promises';
-import { createRequire } from 'node:module';
 import path from 'node:path';
 import { normalizeAssetPatterns, normalizeOptimization, normalizeSourceMaps } from '../../utils';
 import { supportColor } from '../../utils/color';
@@ -19,9 +18,8 @@ import { IndexHtmlTransform } from '../../utils/index-file/index-html-generator'
 import { normalizeCacheOptions } from '../../utils/normalize-cache';
 import { canonicalizePath } from '../../utils/path';
 import {
-  SearchDirectory,
-  findTailwindConfiguration,
   generateSearchDirectories,
+  getTailwindConfig,
   loadPostcssConfiguration,
 } from '../../utils/postcss-configuration';
 import { getProjectRootPaths, normalizeDirectoryPath } from '../../utils/project-metadata';
@@ -280,7 +278,7 @@ export async function normalizeOptions(
   // Skip tailwind configuration if postcss is customized
   const tailwindConfiguration = postcssConfiguration
     ? undefined
-    : await getTailwindConfig(searchDirectories, workspaceRoot, context);
+    : await getTailwindConfig(searchDirectories, workspaceRoot, context.logger);
 
   let serverEntryPoint: string | undefined;
   if (typeof options.server === 'string') {
@@ -538,36 +536,6 @@ export async function normalizeOptions(
   };
 }
 
-async function getTailwindConfig(
-  searchDirectories: SearchDirectory[],
-  workspaceRoot: string,
-  context: BuilderContext,
-): Promise<{ file: string; package: string } | undefined> {
-  const tailwindConfigurationPath = findTailwindConfiguration(searchDirectories);
-
-  if (!tailwindConfigurationPath) {
-    return undefined;
-  }
-
-  // Create a node resolver from the configuration file
-  const resolver = createRequire(tailwindConfigurationPath);
-  try {
-    return {
-      file: tailwindConfigurationPath,
-      package: resolver.resolve('tailwindcss'),
-    };
-  } catch {
-    const relativeTailwindConfigPath = path.relative(workspaceRoot, tailwindConfigurationPath);
-    context.logger.warn(
-      `Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
-        ` but the 'tailwindcss' package is not installed.` +
-        ` To enable Tailwind CSS, please install the 'tailwindcss' package.`,
-    );
-  }
-
-  return undefined;
-}
-
 /**
  * Normalize entry point options. To maintain compatibility with the legacy browser builder, we need a single `browser`
  * option which defines a single entry point. However, we also want to support multiple entry points as an internal option.