Angular 16 with Vite

What is Vite?

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Why Angular CLI start using Vite ?

Vite makes your builds faster.

• Early tests showed over 72% improvement in cold production builds.

• In ng serve powers both your development and production builds with Vite!

*Angular CLI relies on Vite exclusively as a development server. *

Configuration and Support selector mathing

Angular compiler needs to maintain a dependency graph between your components which requires a different compilation model than Vite.

You can give Vite + esbuild a try by updating your angular.json:

"architect": {
  "build": {  * Add the esbuild suffix  */
    "builder": "@angular-devkit/build-angular:browser-esbuild",

---

If you like my work and want to support me to work hard, please donate via:

Revolut website payment or use the QR code above.

Thanks a bunch for supporting me! It means a LOT 😍