CODEWITHSUNDEEP
angularesbuild
Ben Racicot
Ben Racicot

Reputation: 5980

Getting Angular to build with ESBuild

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?

Upvotes: 9

Views: 12366

Answers (3)

Juan Vicente Berzosa Tejero
Juan Vicente Berzosa Tejero

Reputation: 3022

"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:

"forceEsbuild":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 in your app.

enter image description here

Upvotes: 10

Sherif eldeeb
Sherif eldeeb

Reputation: 2226

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

Upvotes: 5

Chellappan வ
Chellappan வ

Reputation: 27461

As mentioned in the doc:

In Angular v15 esbuild support only

 ng build and ng build --watch

Upvotes: 4

Related Questions