How has the Angular build changed with esbuild + Vite (ng build / ng serve)?

Q: How has the Angular build changed with esbuild + Vite (ng build / ng serve)?

**Target Audience:** Developers who know Angular apps but not the build tooling underneath the [CLI](/interview-question/what-does-the-angular-cli-provide); useful before an upgrade from webpack-era projects. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. All terminal output below was produced by running Angular CLI 22.2.3 on a fresh ng new app (one lazy route added) under Node 24: ng build , ng build -c development , and ng serve with live edits. The dev server was started for the experiment and stopped afterwards. Tool versions were read from the installed packages. Version history claims were checked with a web search and are cited. ## 1. Why This Even Matters — A Story First Imagine a print shop that, for every small correction to a book, re-typesets every page by hand, binds the whole book again and only then lets you look at it. That was the webpack-era de

The problem

Question presented to candidate: "Our Angular app still uses the old webpack browser builder and a full rebuild takes minutes. What did the Angular team change in the build system, what do ng build and ng serve actually run today, and what would we have to change to migrate?"

What a strong answer should cover:

The application builder (@angular/build:application) bundles with esbuild; it has been the default for new projects since v17 and replaced the webpack-based browser builder.
ng serve uses @angular/build:dev-server: the same esbuild build in watch mode, served through Vite, which pre-bundles dependencies and handles reloads.
It is still the full Angular compiler (AOT, type-checked templates), just wired into esbuild; bundles are ES modules with code splitting for lazy routes.
Dev-server details: output stays in memory, template and style edits are hot-replaced ("Component update sent"), TypeScript edits reload the page.
Migration: ng update offers a use-application-builder migration; option names change (main → browser), output moves to dist/<app>/browser, and webpack-specific config (custom webpack, some plugins) has no direct equivalent.
@angular/build is a separate, lighter package that does not pull in webpack.

Clarifying questions expected:

"Do we use a custom webpack config or webpack-only plugins today?"
"Is SSR or prerendering part of the build?"

Code / implementation expected: Optional — the build/serve targets in angular.json, and real build output.

build
esbuild
vite

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who know Angular apps but not the build tooling underneath the CLI; useful before an upgrade from webpack-era projects. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. All terminal output below was produced by running Angular CLI 22.2.3 on a fresh ng new app (one lazy route added) under Node 24: ng build, ng build -c development, and ng serve with live edits. The dev server was started for the experiment and stopped afterwards. Tool versions were read from the installed packages. Version history claims were checked with a web search and are cited.

1. Why This Even Matters — A Story First

Imagine a print shop that, for every small correction to a book, re-typesets every page by hand, binds the whole book again and only then lets you look

The solution is hidden so you can try first

10 min read · 10 sections

Read the code

AngularThe build, serve and test targets that ng new generates (angular.json excerpt, CLI 22.2.3)

// angular.json (excerpt) generated by ng new on CLI 22.2.3: projects.demo.architect
{
  "build": {
    "builder": "@angular/build:application",
    "options": {
      "browser": "src/main.ts",
      "tsConfig": "tsconfig.app.json",
      "assets": [
        {
          "glob": "**/*",
          "input": "public"
        }
      ],
      "styles": [
        "src/styles.css"
      ]
    },
    "configurations": {
      "production": {
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "500kB",
            "maximumError": "1MB"
          },
          {
            "type": "anyComponentStyle",
            "maximumWarning": "4kB",
            "maximumError": "8kB"
          }
        ],
        "outputHashing": "all"
      },
      "development": {
        "optimization": false,
        "extractLicenses": false,
        "sourceMap": true
      }
    },
    "defaultConfiguration": "production"
  },
  "serve": {
    "builder": "@angular/build:dev-server",
    "configurations": {
      "production": {
        "buildTarget": "demo:build:production"
      },
      "development": {
        "buildTarget": "demo:build:development"
      }
    },
    "defaultConfiguration": "development"
  },
  "test": {
    "builder": "@angular/build:unit-test"
  }
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.