Ask Your Question

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

asked 2022-03-03 11:00:00 +0000

woof gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

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

david gravatar image
  1. Install Node.js and npm.

  2. Install Vite using npm:

    npm install -g vite

  3. Create a new Angular project using the Angular CLI:

    ng new my-app

  4. Change into the project directory and install the required dependencies:

    cd my-app

    npm install

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

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

    import { createVitePlugin } from '@angular/compiler-cli';
    export default {
     plugins: [
         useTransforms: true,
  7. Update the scripts section of the package.json file:

    "scripts": {
     "start": "vite",
     "build": "vite build"
  8. Remove the src/styles.css file.

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

    @import '~~/node_modules/@angular/material/prebuilt-themes/indigo-pink.css';
  10. Update the src/index.html file to include the styles.scss file:

    <!doctype html>
    <html lang="en">
      <meta charset="utf-8">
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="styles.scss">
  11. Install Angular Material:

    ng add @angular/material

  12. Serve the Angular app using Vite:

    npm start

    This will start a development server at http://localhost:3000.

  13. 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 more

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

Question Tools


Asked: 2022-03-03 11:00:00 +0000

Seen: 22 times

Last updated: Aug 07 '21