7

I'm running Angular 15.0.2 and have updated the angular.json to build with ESBuild.

"serve": {
  "builder": "@angular-devkit/build-angular:browser-esbuild",

Then when trying to serve the app:

WARNING: The experimental esbuild-based builder is not currently supported by the dev-server. The stable Webpack-based builder will be used instead.

How do I configure ESbuild in an Angular app?

Ben Racicot
  • 5,332
  • 12
  • 66
  • 130

3 Answers3

5

esbuild is not supported in dev server, i.e when you run ng serve but supported in build i.e. when you run ng build

to use esbuild in development, just build the app normally then use your own server to serve the app

you can use http-server, or any other dev server (for me I use Vite)

here is the complete example:

package.json

  "scripts": {
    "start:dev": "npm run build && npm run serve",
    "build": "ng build",
    "serve": "vite serve ./dist/YOUR_PROJECT_NAME --port=4200",
  },

note that I replaced ng serve with vite serve or http-server ./dist to view the build result in the browser run npm run start:dev

in both cases, you need to install vite or http-server as devDependencies

Joel Balmer
  • 1,428
  • 2
  • 19
  • 21
Sh eldeeb
  • 1,589
  • 3
  • 18
  • 41
4

As mentioned in the doc:

In Angular v15 esbuild support only

 ng build and ng build --watch
Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
4

"MODERN" ANGULAR: Since angular 16.1

To enable Esbuild, you need to add the following option to your angular.json file, under the “serve” section:

"foceEsbuild":true

Then, you can run “ng serve” as usual and enjoy the benefits of Esbuild. It will use Esbuild instead of Webpack to speed up your development process.

enter image description here

Juan Vicente Berzosa Tejero
  • 2,786
  • 2
  • 5
  • 15