refactor: Use new angular/build and modern compiler options

package.json

@@ -6,21 +6,6 @@
     "url": "https://github.com/just-jeb/angular-builders"
   },
   "private": true,
-  "workspaces": {
-    "packages": [
-      "packages/*",
-      "examples/*",
-      "examples/custom-esbuild/*",
-      "examples/custom-webpack/*",
-      "examples/jest/*"
-    ]
-  },
-  "resolutions": {
-    "@cypress/schematic/@angular-devkit/architect": ">=0.1800.0 < 0.1900.0",
-    "@cypress/schematic/@angular-devkit/core": "^18.0.0",
-    "@cypress/schematic/@angular-devkit/schematics": "^18.0.0",
-    "@cypress/schematic/@schematics/angular": "^18.0.0"
-  },
   "author": "Evgeny Barabanov",
   "license": "MIT",
   "engines": {
@@ -44,17 +29,10 @@
     "@lerna-lite/publish": "^3.0.0",
     "@types/lodash": "^4.14.118",
     "@types/node": "^20.0.0",
-    "husky": "^8.0.0",
-    "lint-staged": "^15.0.0",
     "lodash": "^4.17.15",
     "prettier": "^3.0.0",
     "ts-jest": "29.2.3"
   },
-  "lint-staged": {
-    "*.{js,ts,html,md}": [
-      "prettier --write"
-    ]
-  },
   "prettier": {
     "semi": true,
     "endOfLine": "lf",
@@ -64,6 +42,5 @@
     "bracketSpacing": true,
     "arrowParens": "avoid",
     "singleQuote": true
-  },
-  "packageManager": "[email protected]"
+  }
 }

packages/common/package.json

@@ -15,17 +15,18 @@
     "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
   },
   "scripts": {
-    "prebuild": "yarn clean",
-    "build": "yarn prebuild && tsc",
+    "prebuild": "pnpm clean",
+    "build": "pnpm prebuild && tsc",
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@angular-devkit/core": "^18.0.0",
+		"@angular-devkit/core": "19.0.0-next.13",
+    "tsx": "^4.19.2",
     "ts-node": "^10.0.0",
     "tsconfig-paths": "^4.1.0"
   },
   "devDependencies": {
     "rimraf": "^5.0.0",
-    "typescript": "5.4.5"
+		"typescript": "^5.6.3"
   }
 }

packages/common/src/load-module.ts

@@ -21,7 +21,7 @@ const _tsNodeRegister = (() => {
     loadTsNode().register({
       project: tsConfig,
       compilerOptions: {
-        module: 'CommonJS',
+        module: "Preserve",
         types: [
           'node', // NOTE: `node` is added because users scripts can also use pure node's packages as webpack or others
         ],
@@ -77,14 +77,14 @@ export async function loadModule<T>(
   tsConfig: string,
   logger: logging.LoggerApi
 ): Promise<T> {
-  tsNodeRegister(modulePath, tsConfig, logger);
+  // tsNodeRegister(modulePath, tsConfig, logger);
 
   switch (path.extname(modulePath)) {
     case '.mjs':
       // Load the ESM configuration file using the TypeScript dynamic import workaround.
       // Once TypeScript provides support for keeping the dynamic import this workaround can be
       // changed to a direct dynamic import.
-      return (await loadEsmModule<{ default: T }>(url.pathToFileURL(modulePath))).default;
+      return import(modulePath).then((module) => module.default);
     case '.cjs':
       return require(modulePath);
     case '.ts':
@@ -98,7 +98,7 @@ export async function loadModule<T>(
           // Load the ESM configuration file using the TypeScript dynamic import workaround.
           // Once TypeScript provides support for keeping the dynamic import this workaround can be
           // changed to a direct dynamic import.
-          return (await loadEsmModule<{ default: T }>(url.pathToFileURL(modulePath))).default;
+          return import(modulePath).then((module) => module.default);
         }
         throw e;
       }
@@ -113,7 +113,7 @@ export async function loadModule<T>(
           // Load the ESM configuration file using the TypeScript dynamic import workaround.
           // Once TypeScript provides support for keeping the dynamic import this workaround can be
           // changed to a direct dynamic import.
-          return (await loadEsmModule<{ default: T }>(url.pathToFileURL(modulePath))).default;
+          return import(modulePath).then((module) => module.default);
         }
 
         throw e;

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/package.json

@@ -30,29 +30,34 @@
     "custom"
   ],
   "scripts": {
-    "prebuild": "yarn clean",
-    "build": "yarn prebuild && tsc && ts-node ../../merge-schemes.ts && yarn postbuild",
-    "postbuild": "yarn run e2e",
+    "prebuild": "pnpm clean",
+    "build": "pnpm prebuild && tsc && tsx ../../merge-schemes.ts",
+    "postbuild": "pnpm run e2e",
+    "watch": "tsc --watch",
     "e2e": "jest --config ../../jest-e2e.config.js",
     "clean": "rimraf dist",
     "ci": "./scripts/ci.sh"
   },
   "builders": "builders.json",
   "dependencies": {
     "@angular-builders/common": "workspace:*",
-    "@angular-devkit/architect": ">=0.1800.0 < 0.1900.0",
-    "@angular-devkit/build-angular": "^18.0.0",
-    "@angular-devkit/core": "^18.0.0"
+    "@angular-devkit/architect": "0.1900.0-next.13",
+    "@angular-devkit/build-angular": "19.0.0-next.13",
+    "@angular-devkit/core": "19.0.0-next.13",
+    "@angular/build": "19.0.0-next.13",
+    "rxjs": "7.8.1",
+    "vite": "5.4.10"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^18.0.0"
+    "@angular/compiler": "19.0.0-next.11",
+    "@angular/compiler-cli": "19.0.0-next.11"
   },
   "devDependencies": {
-    "@angular/build": "^18.0.0",
-    "esbuild": "0.21.5",
+    "esbuild": "0.24.0",
     "jest": "29.7.0",
     "rimraf": "^5.0.0",
     "ts-node": "^10.0.0",
-    "typescript": "5.4.5"
+    "tsx": "^4.19.2",
+    "typescript": "^5.6.3"
   }
 }

packages/custom-esbuild/src/application/index.ts

@@ -1,13 +1,13 @@
 import * as path from 'node:path';
 import { BuilderContext, createBuilder } from '@angular-devkit/architect';
-import { buildApplication } from '@angular-devkit/build-angular';
+import { buildApplication } from '@angular/build';
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
-import type { ApplicationBuilderExtensions } from '@angular/build/src/builders/application/options';
 import { defer, switchMap } from 'rxjs';
 import { loadModule } from '@angular-builders/common';
 
 import { loadPlugins } from '../load-plugins';
 import { CustomEsbuildApplicationSchema } from '../custom-esbuild-schema';
+import { IndexHtmlTransform } from '@angular/build/private';
 
 export function buildCustomEsbuildApplication(
   options: CustomEsbuildApplicationSchema,
@@ -19,16 +19,16 @@ export function buildCustomEsbuildApplication(
   return defer(async () => {
     const codePlugins = await loadPlugins(options.plugins, workspaceRoot, tsConfig, context.logger);
 
-    const indexHtmlTransformer = options.indexHtmlTransformer
+    const indexHtmlTransformer: IndexHtmlTransform = options.indexHtmlTransformer
       ? await loadModule(
           path.join(workspaceRoot, options.indexHtmlTransformer),
           tsConfig,
           context.logger
         )
       : undefined;
 
-    return { codePlugins, indexHtmlTransformer } as ApplicationBuilderExtensions;
-  }).pipe(switchMap(extensions => buildApplication(options, context, extensions)));
+    return codePlugins;
+  }).pipe(switchMap(plugins => buildApplication(options, context, plugins)));
 }
 
 export default createBuilder<json.JsonObject & CustomEsbuildApplicationSchema>(

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 CustomEsbuildApplicationSchema = ApplicationBuilderOptions & {
   plugins?: string[];

packages/custom-esbuild/src/dev-server/index.ts

@@ -4,27 +4,25 @@ import {
   DevServerBuilderOptions,
   DevServerBuilderOutput,
   executeDevServerBuilder,
-} from '@angular-devkit/build-angular';
-import type { IndexHtmlTransform } from '@angular/build/src/utils/index-file/index-html-generator';
+} from '@angular/build';
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
 import { Observable, from, switchMap } from 'rxjs';
-import type { Connect } from 'vite';
 import { loadModule } from '@angular-builders/common';
 
+import type { Middleware } from './types';
 import { loadPlugins } from '../load-plugins';
-import { patchBuilderContext } from './patch-builder-context';
 import {
   CustomEsbuildApplicationSchema,
   CustomEsbuildDevServerSchema,
 } from '../custom-esbuild-schema';
+import { IndexHtmlTransform } from '@angular/build/private';
 
 export function executeCustomDevServerBuilder(
   options: CustomEsbuildDevServerSchema,
   context: BuilderContext
 ): Observable<DevServerBuilderOutput> {
   const buildTarget = targetFromTargetString(
-    // `browserTarget` has been deprecated.
-    options.buildTarget ?? options.browserTarget!
+    options.buildTarget
   );
 
   async function getBuildTargetOptions() {
@@ -42,7 +40,7 @@ export function executeCustomDevServerBuilder(
       const middleware = await Promise.all(
         (options.middlewares || []).map(middlewarePath =>
           // https://github.com/angular/angular-cli/pull/26212/files#diff-a99020cbdb97d20b2bc686bcb64b31942107d56db06fd880171b0a86f7859e6eR52
-          loadModule<Connect.NextHandleFunction>(
+          loadModule<Middleware>(
             path.join(workspaceRoot, middlewarePath),
             tsConfig,
             context.logger
@@ -65,15 +63,12 @@ export function executeCustomDevServerBuilder(
           )
         : undefined;
 
-      patchBuilderContext(context, buildTarget);
+      // patchBuilderContext(context, buildTarget);
 
-      return {
-        transforms: { indexHtml: indexHtmlTransformer },
-        extensions: { middleware, buildPlugins },
-      };
+      return { middleware, buildPlugins, indexHtmlTransformer };
     }),
-    switchMap(({ transforms, extensions }) =>
-      executeDevServerBuilder(options, context, transforms, extensions)
+    switchMap((extensions) =>
+      executeDevServerBuilder(options, context, extensions)
     )
   );
 }

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) {

packages/custom-esbuild/src/dev-server/types.ts

@@ -0,0 +1,9 @@
+import type http from 'node:http';
+
+// This is the inline type used by the `@angular-devkit/build-angular:dev-server`
+// executor; however, it is not exposed as a type.
+export type Middleware = (
+  req: http.IncomingMessage,
+  res: http.ServerResponse,
+  next: (err?: unknown) => void
+) => void;

packages/custom-esbuild/src/schemes.ts

@@ -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`,
   },