How to use Angular with Vite
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Integrating Vite into the Angular ecosystem has transformed the developer experience by drastically reducing startup times and enhancing Hot Module Replacement (HMR) performance.
As the creator of CoreUI and with over 25 years of software development experience, I have closely followed the evolution of build tools from early Gulp tasks to the modern esbuild-powered era.
The most effective way to use Vite with Angular is to leverage the official @angular-devkit/build-angular:application builder, which uses Vite for the development server and esbuild for production bundles.
This native integration ensures full compatibility with the Angular compiler while providing the blistering speed associated with Vite.
Use the @angular-devkit/build-angular:application builder in your angular.json to enable the Vite-powered development server.
"builder": "@angular-devkit/build-angular:application",
"options": {
"browser": "src/main.ts",
"index": "src/index.html",
"polyfills": [
"zone.js"
]
}
This configuration updates the project’s build engine to the modern “Application Builder” introduced in Angular v17. Unlike the older Webpack-based browser builder, this newer version utilizes esbuild for high-speed compilation and Vite specifically to serve the application during development. By making this single change in your angular.json, you transition your workspace to a toolchain that is significantly faster for both cold starts and incremental re-builds.
1. Updating the Build Configuration
To begin the transition, you must locate the architect section of your angular.json file. The primary change involves replacing the legacy builder string with the new application-focused one. This builder is designed to handle both client-side and server-side rendering in a unified way, making it the standard choice for new Angular projects.
{
"projects": {
"my-app": {
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
}
],
"outputHashing": "all"
}
}
}
}
}
}
}
This snippet demonstrates the minimal required options for the application builder. Note that the main property from the old builder is now renamed to browser. This explicitly identifies the entry point for the client-side code, allowing the builder to distinguish between browser and server bundles if you choose to implement SSR later.
2. Configuring the Development Server
Once the build engine is updated, the development server configuration must be verified to ensure it correctly invokes the Vite-based service. The serve target in angular.json typically references the build target. When the build target uses the application builder, the dev-server builder automatically switches to Vite mode.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "my-app:build:production"
},
"development": {
"buildTarget": "my-app:build:development"
}
},
"defaultConfiguration": "development"
}
The dev-server remains the same in terms of the builder name, but its internal logic detects the upstream builder. When it sees @angular-devkit/build-angular:application, it initializes a Vite instance. This setup provides instant feedback during development, especially when working with repetitive tasks like using ngFor in Angular to render complex lists.
3. Handling Styles and Assets
Vite and esbuild handle assets and styles with much higher efficiency than Webpack. In an Angular context, you still define your global styles in the styles array. However, the underlying process now uses lightning-fast CSS processors that integrate seamlessly with the Vite HMR system.
"styles": [
"node_modules/@coreui/coreui/dist/css/coreui.min.css",
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
}
If you are using CoreUI, ensure your paths are correctly mapped. The modern builder will watch these files and push updates to the browser without a full page reload. This is particularly useful when customizing CoreUI Buttons or layout components, where visual feedback needs to be immediate.
4. Polyfills and Zone.js
In older Angular versions, polyfills were often managed through a separate polyfills.ts file. The modern application builder simplifies this by allowing you to list polyfills directly in the angular.json array. For most applications, zone.js is the only mandatory entry.
"polyfills": [
"zone.js"
]
By specifying zone.js here, the builder ensures that Angular’s change detection mechanism is properly initialized. If you are building a zoneless application (available in newer Angular versions), you can omit this, which further reduces the bundle size and improves startup performance under the Vite server.
5. Integrating CoreUI with the Vite Builder
When using modern tooling, integrating UI libraries like CoreUI becomes even smoother. The Angular Dashboard Template is fully compatible with the esbuild and Vite workflow. Because Vite handles pre-bundling of dependencies using esbuild, the heavy lifting of processing large third-party libraries happens once at startup.
import { Component } from '@angular/core'
import { ButtonDirective } from '@coreui/angular'
@Component({
selector: 'app-root',
standalone: true,
imports: [ButtonDirective],
template: `
<button cButton color='primary'>
Vite + Angular is Fast!
</button>
`
})
export class AppComponent {}
In the example above, the ButtonDirective from CoreUI is imported into a standalone component. When the Vite dev server is running, it will optimize the @coreui/angular package, ensuring that subsequent reloads are nearly instantaneous. This workflow is the gold standard we use at CoreUI for all our modern Angular implementations.
6. Optimization and Performance Tuning
The transition to Vite isn’t just about development speed; the production build also benefits from the speed of esbuild. You can further tune your configuration by adjusting the optimization and sourceMap settings within the configurations block of your angular.json.
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"statsJson": false
}
}
Turning on optimization triggers esbuild’s advanced minification and tree-shaking algorithms. In our benchmarks at CoreUI, we’ve seen production build times drop significantly compared to traditional Webpack builds. This efficiency allows for faster CI/CD pipelines and more frequent deployments.
Best Practice Note:
When switching to the Vite-powered builder, ensure your environment is running on the latest LTS version of Node.js. Older versions may not support the native binary requirements of esbuild. This approach is exactly what we recommend for the CoreUI Angular Dashboard to maintain peak performance and reliability. Using the native application builder is always preferred over custom third-party Vite plugins, as it is officially supported and maintained by the Angular team.
