Migrate to esbuild

[FrancescoBorzi]

https://angular.io/guide/esbuild#for-existing-applications

https://stackoverflow.com/questions/77508160/custom-webpack-config-in-angular-esbuild

[arturovt]

Just FYI, since you're using @angular-builders/custom-webpack, we've recently released a beta version of the custom ESBuild (@angular-builders/custom-esbuild@17.1.0-beta.0).

Check out the diff (you might need some witchcraft with the ESBuild plugin, especially if you're modifying the target within the custom Webpack config):

diff --git a/angular.json b/angular.json
index e34d489..aca5db6 100644
--- a/angular.json
+++ b/angular.json
@@ -9,19 +9,15 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-builders/custom-webpack:browser",
+          "builder": "@angular-builders/custom-esbuild:application",
           "options": {
-            "customWebpackConfig": {
-              "allowedCommonJsDependencies": ["highlight.js", "squel", "sqlstring"],
-              "extractCss": true,
-              "path": "./angular.webpack.js"
-            },
+            "plugins": ["./plugin.js"],
             "aot": true,
             "outputPath": "dist",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "assets": [
               "src/assets",
               "src/favicon.ico",
@@ -97,7 +93,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-builders/custom-webpack:dev-server",
+          "builder": "@angular-builders/custom-esbuild:dev-server",
           "options": {
             "browserTarget": "Keira3:build"
           },
diff --git a/package-lock.json b/package-lock.json
index 9ac72db..ece80f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "webpack-sources": "3.2.3"
       },
       "devDependencies": {
+        "@angular-builders/custom-esbuild": "^17.1.0-beta.0",
         "@angular-builders/custom-webpack": "17.0.0",
         "@angular-devkit/build-angular": "17.1.1",
         "@angular-eslint/builder": "17.2.1",
@@ -121,6 +122,25 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@angular-builders/custom-esbuild": {
+      "version": "17.1.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@angular-builders/custom-esbuild/-/custom-esbuild-17.1.0-beta.0.tgz",
+      "integrity": "sha512-b9rvo21JS/sJdxWRZHS3ygGvJnWxajoc3SaG/qKUMqNUWXP9lQLk+jUiu0RldaJiWtcfuqY7kGpcfUOOfg6fiw==",
+      "dev": true,
+      "dependencies": {
+        "@angular-devkit/architect": ">=0.1701.0 < 0.1800.0",
+        "@angular-devkit/build-angular": "^17.1.0",
+        "@angular-devkit/core": "^17.1.0",
+        "ts-node": "^10.0.0",
+        "tsconfig-paths": "^4.1.0"
+      },
+      "engines": {
+        "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
+      },
+      "peerDependencies": {
+        "@angular/compiler-cli": "^17.1.0"
+      }
+    },
     "node_modules/@angular-builders/custom-webpack": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/@angular-builders/custom-webpack/-/custom-webpack-17.0.0.tgz",
diff --git a/package.json b/package.json
index cd89e38..c8ce43f 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "webpack-sources": "3.2.3"
   },
   "devDependencies": {
+    "@angular-builders/custom-esbuild": "^17.1.0-beta.0",
     "@angular-builders/custom-webpack": "17.0.0",
     "@angular-devkit/build-angular": "17.1.1",
     "@angular-eslint/builder": "17.2.1",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 93c08c1..b3fd4bd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,3 @@
-import 'reflect-metadata';
-import '../polyfills';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
diff --git a/src/app/scss/main.scss b/src/app/scss/main.scss
index 68449b9..41d9a51 100644
--- a/src/app/scss/main.scss
+++ b/src/app/scss/main.scss
@@ -1,4 +1,4 @@
-$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
+$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
 @import '../../../node_modules/bootstrap/scss/bootstrap';
 @import '../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
 @import '../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
diff --git a/src/polyfills.ts b/src/polyfills.ts
deleted file mode 100644
index eb362a8..0000000
--- a/src/polyfills.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/**
- * If the application will be indexed by Google Search, the following is required.
- * Googlebot uses a renderer based on Chrome 41.
- * https://developers.google.com/search/docs/guides/rendering
- **/
-// import 'core-js/es6/array';
-
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- */
-
-// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
-// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
-// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
-/*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index 1576bcc..9ad77fb 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -5,6 +5,6 @@
     "baseUrl": "",
     "types": []
   },
-  "files": ["main.ts", "polyfills.ts"],
+  "files": ["main.ts"],
   "include": ["src/**/*.d.ts"]
 }
diff --git a/plugin.js b/plugin.js
new file mode 100644
index 0000000..310d8b4
--- /dev/null
+++ b/plugin.js
@@ -0,0 +1,11 @@
+/** @type {import('esbuild').Plugin} */
+const plugin = {
+  name: 'plugin',
+  setup(build) {
+    const options = build.initialOptions;
+    options.external ??= [];
+    options.external.push('sqlite3');
+  },
+};
+
+module.exports = plugin;

[FrancescoBorzi]

thank you very much @arturovt for your input! much appreciated. I'm very busy now but I will surely try when I have the chance. Слава Україні!

[FrancescoBorzi]

thanks for your input @arturovt , it did help: #2997