El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Angular Universal

Siguiente ►
►

Introducción

Angular Universal es una tecnología que permite la renderización del lado del servidor (SSR) para aplicaciones Angular. Esto significa que en lugar de que el navegador del cliente renderice la aplicación, el servidor lo hace y envía el HTML completamente renderizado al cliente. Esto puede mejorar significativamente el rendimiento de la aplicación y la optimización para motores de búsqueda (SEO).

Beneficios de Angular Universal

  1. Mejora del Rendimiento Inicial: La aplicación se carga más rápido porque el HTML ya está renderizado en el servidor.
  2. Mejor SEO: Los motores de búsqueda pueden indexar mejor el contenido de la aplicación.
  3. Mejor Experiencia de Usuario: Los usuarios ven contenido más rápidamente, lo que mejora la percepción de la velocidad de la aplicación.

Configuración de Angular Universal

Paso 1: Crear una Aplicación Angular

Si aún no tienes una aplicación Angular, puedes crear una nueva utilizando Angular CLI:

ng new my-universal-app
cd my-universal-app

Paso 2: Añadir Angular Universal

Angular CLI facilita la adición de Angular Universal a tu proyecto. Ejecuta el siguiente comando:

ng add @nguniversal/express-engine

Este comando realiza varias tareas:

  • Instala las dependencias necesarias.
  • Configura el servidor Express.
  • Actualiza los archivos de configuración de Angular.

Paso 3: Configuración del Servidor

El comando anterior crea un archivo server.ts en la raíz del proyecto. Este archivo configura un servidor Express para manejar las solicitudes y renderizar la aplicación Angular en el servidor.

import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

const app = express();

const DIST_FOLDER = join(process.cwd(), 'dist/my-universal-app/browser');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

Paso 4: Construcción y Ejecución

Para construir y ejecutar la aplicación con Angular Universal, utiliza los siguientes comandos:

npm run build:ssr
npm run serve:ssr

El primer comando construye la aplicación tanto para el navegador como para el servidor. El segundo comando inicia el servidor Express que renderiza la aplicación en el servidor.

Ejemplo Práctico

Componentes y Módulos

Asegúrate de que tus componentes y módulos estén preparados para la renderización del lado del servidor. Por ejemplo, evita el uso de APIs del navegador directamente en el constructor de los componentes.

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Angular Universal!</h1>`
})
export class AppComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(this.platformId)) {
      // Código específico del navegador
    }
  }
}

Manejo de Datos

Para manejar datos en Angular Universal, es importante que los servicios que realizan solicitudes HTTP estén preparados para SSR. Utiliza TransferState para transferir el estado del servidor al cliente.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TransferState, makeStateKey } from '@angular/platform-browser';

const DATA_KEY = makeStateKey('data');

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient, private transferState: TransferState) {}

  getData() {
    if (this.transferState.hasKey(DATA_KEY)) {
      return this.transferState.get(DATA_KEY, null);
    } else {
      return this.http.get('/api/data').pipe(
        tap(data => {
          this.transferState.set(DATA_KEY, data);
        })
      );
    }
  }
}

Ejercicio Práctico

Ejercicio 1: Configuración de Angular Universal

  1. Objetivo: Configurar una aplicación Angular existente para usar Angular Universal.
  2. Pasos:
    • Crea una nueva aplicación Angular.
    • Añade Angular Universal utilizando Angular CLI.
    • Configura el servidor Express.
    • Construye y ejecuta la aplicación.

Solución

ng new my-universal-app
cd my-universal-app
ng add @nguniversal/express-engine
npm run build:ssr
npm run serve:ssr

Conclusión

Angular Universal es una poderosa herramienta para mejorar el rendimiento y la SEO de las aplicaciones Angular. Al renderizar la aplicación en el servidor, los usuarios experimentan tiempos de carga más rápidos y los motores de búsqueda pueden indexar mejor el contenido. Con la configuración adecuada y el uso de TransferState, puedes crear aplicaciones Angular que sean rápidas y eficientes tanto en el servidor como en el cliente.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados