Angular con Vite es locamente rápido (Ejemplo de Angular 15)

Vite es una herramienta de compilación cuyo objetivo es proporcionar una experiencia de desarrollo más rápida y sencilla para los proyectos web modernos.

Consta de dos partes principales:

Un servidor de desarrollo que proporciona mejoras en las características de los módulos nativos de ES, por ejemplo, un reemplazo de módulos en caliente (HMR) extremadamente rápido.

Un comando de compilación que agrupa su código con Rollup, preconfigurado para producir activos estáticos altamente optimizados para la producción.

Vite está orientado a la opinión y viene con valores predeterminados, pero también es altamente extensible a través de su API de plugins y la API de JavaScript

Cómo empezar

pnpm init && git init

para crear una nueva carpeta

pnpm i -D typescript vite

para que mi proyecto de vainilla funcione

Añadir el archivo HTML ahora en

 ./index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Angular</title>
</head>
<body>
<div id="app"></div>
<app-root></app-root>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

Agrega el archivo ./src/main.ts

document.querySelector<HTMLDivElement>('#app')!.innerHTML = 'Hello world';

Disfruta de tu Vite:

pnpm vite

Que es, elegante y simple.

Si tu deseas puedes ampliar está explicación en el siguiente video.

Añadir Angular a Vite

Necesitamos que Vite funcione con Angular. Desde Angular 14, tenemos un componente independiente que nos permite hacer que Angular funcione con cualquier tipo de framework o incluso vanilla javascript. Vamos a construirlo:

pnpm i @angular/compiler@15.0.0-next.6 @angular/platform-browser@15.0.0-next.6 @angular/core@15.0.0-next.6 zone.js@0.11.8 rxjs

Actualiza tu src/main.ts para utilizar Angular:

import "@angular/compiler";
import "zone.js";
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);

Añade ahora /src/app.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [],
template: `
<p> hello, this is angular and vite </p>
`,
styles: [`
:host {
display: block;
}`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
constructor() {}
ngOnInit(): void {}
}

Recuerde, angular usando @ como decorador, necesitamos tsconfig.json para habilitarlo.

{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"skipLibCheck": true,
"types": ["vite/client"], // for vite
"experimentalDecorators": true, // for angular
},
"include": ["src"]
}

Disfrutar de nuevo con pnpm vite

¿Qué tal el enrutamiento? Bien, hagámoslo

Añadir Angular Routing para Vite

Necesitamos más paquetes aquí:

pnpm i @angular/common@15.0.0-next.6 @angular/router@15.0.0-next.6

Crea ./app.routing.ts

import { Route, provideRouter } from '@angular/router';
const routes: Route[] = [
{
path: '',
loadComponent: () => import('./home.component').then(c => c.HomeComponent)
},
{
path: 'about',
loadComponent: (): any => import('./about.component').then (c => c.AboutComponent)
}
];
export const appRouting = [
provideRouter(routes)
]

Ahora crea ./src/home.component.ts y ./src/about.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-home',
standalone: true,
imports: [CommonModule],
template: `
<p> hello, this is home page </p>
`,
})
export class HomeComponent {}

Añade el archivo /src/about.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-about',
standalone: true,
imports: [CommonModule],
template: `
<p> hello, this is about us page </p>
`,
})
export class AboutComponent {}

Eso es bueno, sigue moviéndote y termina de moverte con una actualización de app.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, RouterLink],
template: `
<p> hello, this is angular, avite </p>
<a routerLink="/" href="#" class="text-xl font-bold no-underline hover:underline ...">Home | </a>
<a routerLink="/about" href="#" class="text-xl font-bold no-underline hover:underline ...">About us</a>
<hr>
<router-outlet></router-outlet>
`,
styles: [
`
:host {
display: block;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {}

y otra actualización en src/main.ts para asegurarnos de que nuestra ruta funciona:

import "@angular/compiler";
import "zone.js";
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { appRouting } from "./app.routing";
bootstrapApplication(AppComponent, {providers: [...appRouting]});

Muy bien, vamos pnpm vite

Bieennn. Sólo un poco de Tailwind y tendrás una hermosa angular.

pnpm install -D tailwindcss postcss autoprefixer && pnpx tailwindcss init -p

actualiza tu /tailwind.config.js a:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

añadir /src/index.css así:

@tailwind base; @tailwind components; @tailwind utilities;

y luego importarlo a main.ts :

import "@angular/compiler";
import "zone.js";
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { appRouting } from "./app.routing";
bootstrapApplication(AppComponent, {providers: [...appRouting]});
import './index.css'

y ya está hecho pnpm vite