How to Use Vite with Angular?

Vite is a modern build tool that dramatically enhances the development experience of front-end systems. Originally developed for Vue.js, Vite has gained a reputation for speed and performance. This article will explore how to integrate Vite and Angular using Vite’s fast development server and effective bundling capabilities.

These are the following ways to use Vite with Angular:

Using Vite with Angular CLI

This approach utilizes the Angular CLI to create an Angular project, followed by integrating Vite for development and production builds.

Step 1: Create Angular Project

ng new my-angular-vite-app

Step 2: Install Vite

cd my-angular-vite-app
npm install vite --save-dev

Step 3: Create vite.config.js

Create a file named vite.config.js in the root of your project with the following content:

import { defineConfig } from 'vite';
import angular from 'vite-plugin-angular';

export default defineConfig({
  plugins: [angular()],
  server: {
    port: 4200,
  },
});

Step 4: Add the Vite commands to your scripts section

"scripts": {
  "start": "ng serve",
  "build": "ng build",
  "vite": "vite"
}

Output: Run the application using:

npm run vite

Note: You will see the output in the browser at http://localhost:4200.

Using Vite for an Existing Angular Project

This approach is useful for developers looking to transition an existing Angular application to use Vite for improved performance.

Step 1: Navigate to Existing Project

cd existing-angular-app

Step 2: Install Vite

npm install vite --save-dev

Step 3: Create vite.config.js

import { defineConfig } from 'vite';
import angular from 'vite-plugin-angular';

export default defineConfig({
  plugins: [angular()],
  server: {
    port: 4200,
  },
});

Step 4: Add script

"scripts": {
  "start": "vite"
}

Output: Run the application using:

npm start

Note: The application will now run using Vite's development server, making it faster and more efficient.

Conclusion

Integrating Vite and Angular can dramatically improve your development experience, providing faster builds and more efficient workflows. Whether you are starting a new project or migrating an existing one, Vite is a powerful tool that can optimize your Angular application.