What are the steps to develop an Angular application using Vite?

answered 2021-08-07 21:00:00 +0000

david
31 ●16 ●4

Install Node.js and npm.
Install Vite using npm:

npm install -g vite
Create a new Angular project using the Angular CLI:

ng new my-app
Change into the project directory and install the required dependencies:

cd my-app

npm install
Create a new file named vite.config.js at the root of your project.

Add the following content to the vite.config.js file:

import { createVitePlugin } from '@angular/compiler-cli';

export default {
 plugins: [
   createVitePlugin({
     useTransforms: true,
   }),
 ],
};

Update the scripts section of the package.json file:

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

Remove the src/styles.css file.

Create a new file named styles.scss in src/ and add the following content:

@import '~~/node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

Update the src/index.html file to include the styles.scss file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.scss">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Install Angular Material:

ng add @angular/material
Serve the Angular app using Vite:

npm start

This will start a development server at http://localhost:3000.
Build the Angular app using Vite:

npm run build

This will create a production build of the app in the dist/ directory.

edit flag offensive delete link

add a comment

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

What are the steps to develop an Angular application using Vite?

1 Answer

Your Answer

Question Tools

Stats

Related questions

What are the steps to develop an Angular application using Vite? edit

1 Answer

Your Answer

Question Tools

Stats

Related questions

What are the steps to develop an Angular application using Vite?