feat: migrate to @angular/build - Update custom-esbuild to use @angular/build instead of @angular-devkit/build-angular for better performance - Update import paths to use @angular/build/private for internal APIs - Update dev-server builder context patching to use @angular/build:application - Update schema references to use @angular/build builders - Update README documentation for Angular 20 and @angular/build - Add TypeScript import fixes for better ESM support - Improve Jest examples with better Cypress config and TypeScript usage - Update common module loading logic for better CommonJS/ESM compatibility

Author: just-jeb

examples/custom-webpack/full-cycle-app/e2e/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "include": ["**/*.ts"],
   "compilerOptions": {
     "sourceMap": false,

examples/jest/multiple-apps/projects/my-first-app/e2e/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../../tsconfig.base.json",
+  "extends": "../../../tsconfig.json",
   "include": ["**/*.ts"],
   "compilerOptions": {
     "sourceMap": false,

examples/jest/multiple-apps/projects/my-second-app/e2e/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../../tsconfig.base.json",
+  "extends": "../../../tsconfig.json",
   "include": ["**/*.ts"],
   "compilerOptions": {
     "sourceMap": false,

packages/common/src/load-module.ts

@@ -107,7 +107,7 @@ export async function loadModule<T>(
       // The file could be either CommonJS or ESM.
       // CommonJS is tried first then ESM if loading fails.
       try {
-        return require(modulePath);
+        return require(modulePath).default || require(modulePath);
       } catch (e: any) {
         if (e.code === 'ERR_REQUIRE_ESM') {
           // Load the ESM configuration file using the TypeScript dynamic import workaround.

packages/custom-esbuild/README.md

@@ -24,13 +24,15 @@ Allow customizing ESBuild configuration
 <details>
   <summary>Click to expand</summary>
 
+- [Version 19](https://github.com/just-jeb/angular-builders/blob/19.x.x/packages/custom-esbuild/README.md)
+- [Version 18](https://github.com/just-jeb/angular-builders/blob/18.x.x/packages/custom-esbuild/README.md)
 - [Version 17](https://github.com/just-jeb/angular-builders/blob/17.x.x/packages/custom-esbuild/README.md)
 
 </details>
 
 ## Prerequisites:
 
-- [Angular CLI 18](https://www.npmjs.com/package/@angular/cli)
+- [Angular CLI 20](https://www.npmjs.com/package/@angular/cli)
 
 # Usage
 
@@ -118,7 +120,7 @@ Builder options:
 
 In the above example, we specify the list of `plugins` that should implement the ESBuild plugin schema. These plugins are custom user plugins and are added to the original ESBuild Angular configuration. Additionally, the `indexHtmlTransformer` property is used to specify the path to the file that exports the function used to modify the `index.html`.
 
-The plugin file can export either a single plugin or a list of plugins. If a plugin accepts configuration then the config should be provided in `angular.json`:
+The plugin file can export either a single plugin, a list of plugins or a factory function that returns a plugin or list of plugins. If a plugin accepts configuration then the config should be provided in `angular.json`:
 
 ```ts
 // esbuild/plugins.ts
@@ -143,13 +145,13 @@ import type { Plugin, PluginBuild } from 'esbuild';
 
 function defineEnv(pluginOptions: { stage: string }): Plugin {
   return {
-    name: 'define-env',  
+    name: 'define-env',
     setup(build: PluginBuild) {
       const buildOptions = build.initialOptions;
       buildOptions.define.stage = JSON.stringify(pluginOptions.stage);
     },
   };
-};
+}
 
 export default defineEnv;
 ```
@@ -180,6 +182,25 @@ const updateExternalPlugin: Plugin = {
 export default [defineTextPlugin, updateExternalPlugin];
 ```
 
+Or:
+
+```ts
+// esbuild/plugins.ts
+import type { Plugin, PluginBuild } from 'esbuild';
+import type { ApplicationBuilderOptions } from '@angular-devkit/build-angular';
+import type { Target } from '@angular-devkit/architect';
+
+export default (builderOptions: ApplicationBuilderOptions, target: Target): Plugin => {
+  return {
+    name: 'define-text',
+    setup(build: PluginBuild) {
+      const options = build.initialOptions;
+      options.define.currentProject = JSON.stringify(target.project);
+    },
+  };
+};
+```
+
 ## Custom ESBuild `dev-server`
 
 The `@angular-builders/custom-esbuild:dev-server` is an enhanced version of the `@angular-devkit/build-angular:dev-server` builder that allows the specification of `middlewares` (Vite's `Connect` functions). It also obtains `plugins` and `indexHtmlTransformer` from the `:application` configuration to run the Vite server with all the necessary configuration applied.
@@ -239,7 +260,7 @@ It is useful when you want to transform your `index.html` according to the build
 `index-html-transformer.js`:
 
 ```js
-module.exports = (indexHtml) => {
+module.exports = indexHtml => {
   const i = indexHtml.indexOf('</body>');
   const content = `<p>Dynamically inserted content</p>`;
   return `${indexHtml.slice(0, i)}

packages/custom-esbuild/e2e/custom-esbuild-schema.spec.ts

@@ -10,16 +10,17 @@ describe('Custom ESBuild schema tests', () => {
     customEsbuildDevServerSchema = require('../dist/dev-server/schema.json');
   });
 
-  it('should fit the schema of the `@angular-devkit/build-angular:application`', () => {
+  it('should fit the schema of the `@angular/build:application`', () => {
     const path = resolvePackagePath('@angular/build', 'src/builders/application/schema.json');
     const originalApplicationSchema = require(path);
     customEsbuildApplicationSchema.properties['plugins'] = undefined;
     customEsbuildApplicationSchema.properties['indexHtmlTransformer'] = undefined;
     expect(originalApplicationSchema.properties).toEqual(customEsbuildApplicationSchema.properties);
   });
 
-  it('should fit the schema of the `@angular-devkit/build-angular:dev-server`', () => {
-    const originalDevServerSchema = require('@angular-devkit/build-angular/src/builders/dev-server/schema.json');
+  it('should fit the schema of the `@angular/build:dev-server`', () => {
+    const path = resolvePackagePath('@angular/build', 'src/builders/dev-server/schema.json');
+    const originalDevServerSchema = require(path);
     customEsbuildDevServerSchema.properties['middlewares'] = undefined;
     expect(originalDevServerSchema.properties).toEqual(customEsbuildDevServerSchema.properties);
   });

packages/custom-esbuild/src/custom-esbuild-schema.ts

@@ -1,4 +1,4 @@
-import { ApplicationBuilderOptions, DevServerBuilderOptions } from '@angular-devkit/build-angular';
+import { ApplicationBuilderOptions, DevServerBuilderOptions } from '@angular/build';
 
 export type PluginConfig = string | { path: string; options?: Record<string, unknown> };
 

packages/custom-esbuild/src/dev-server/patch-builder-context.ts

@@ -1,8 +1,8 @@
 import { BuilderContext, Target } from '@angular-devkit/architect';
 
 const executorToBuilderMap = new Map<string, string>([
-  ['@angular-builders/custom-esbuild', '@angular-devkit/build-angular:application'],
-  ['@angular-builders/custom-esbuild:application', '@angular-devkit/build-angular:application'],
+  ['@angular-builders/custom-esbuild', '@angular/build:application'],
+  ['@angular-builders/custom-esbuild:application', '@angular/build:application'],
 ]);
 
 function cleanBuildTargetOptions(options: any) {
@@ -15,9 +15,9 @@ export function patchBuilderContext(context: BuilderContext, buildTarget: Target
   const originalGetBuilderNameForTarget = context.getBuilderNameForTarget;
 
   // We have to patch `getBuilderNameForTarget` because Angular CLI checks
-  // whether the runnable target is `@angular-devkit/build-angular:application`
+  // whether the runnable target is `@angular/build:application`
   // and then defines the server to run. If the `builderName` (returned by
-  // `context.getBuilderNameForTarget`) is not an `@angular-devkit/build-angular:application`,
+  // `context.getBuilderNameForTarget`) is not an `@angular/build:application`,
   // then it will use the Webpack server for the `dev-server target`. By patching
   // the return value, Angular will use the Vite server for the `dev-server` target.
   context.getBuilderNameForTarget = async target => {

packages/custom-esbuild/src/load-index-html-transformer.ts

@@ -1,7 +1,7 @@
 import { loadModule } from '@angular-builders/common';
 import { logging } from '@angular-devkit/core';
 import { Target } from '@angular-devkit/architect';
-import type { IndexHtmlTransform } from '@angular/build/src/utils/index-file/index-html-generator';
+import type { IndexHtmlTransform } from '@angular/build/private';
 
 export async function loadIndexHtmlTransformer(
   indexHtmlTransformerPath: string,

packages/custom-esbuild/src/schemes.ts

@@ -1,4 +1,4 @@
-// Base schemes from build-angular@18.0.0
+// Base schemes from @angular/build@20.0.0
 module.exports = [
   {
     originalSchemaPackage: '@angular/build',
@@ -7,7 +7,8 @@ module.exports = [
     newSchemaPath: `${__dirname}/../dist/application/schema.json`,
   },
   {
-    originalSchemaPath: '@angular-devkit/build-angular/src/builders/dev-server/schema.json',
+    originalSchemaPackage: '@angular/build',
+    originalSchemaPath: 'src/builders/dev-server/schema.json',
     schemaExtensionPaths: [`${__dirname}/dev-server/schema.ext.json`],
     newSchemaPath: `${__dirname}/../dist/dev-server/schema.json`,
   },