Implementando Angular Universal

Clase 14 de 23 • Curso de Rendimiento en Angular

Resumen

¿Cómo configurar Universal en Angular?

La configuración de Angular Universal permite que las aplicaciones se ejecuten en el servidor utilizando Node.js y Express para proporcionar un SSR (Server Side Rendering). Esto mejora el tiempo de carga y el SEO de las aplicaciones. Aquí te explicamos cómo hacerlo con comandos simples y cómo solucionar posibles problemas que puedan surgir durante el proceso.

¿Nececito documentación oficial?

Antes de realizar cualquier configuración, es altamente recomendable consultar la documentación oficial de Angular para entender completamente los pasos requeridos y las funcionalidades disponibles. Esta documentación va a guiarte a lo largo del proceso y asegurarte de hacerlo correctamente sin olvidar pasos cruciales.

¿Cómo instalar Angular Universal?

Instalar Angular Universal: Angular facilita la configuración mediante un comando que automatiza la mayoría del proceso. Este comando toma en cuenta la estructura y lineamientos de Angular para generar un servidor Node.js en Express que servirá los archivos de la aplicación.
```
ng add @nguniversal/express-engine
```
Al ejecutar este comando, asegúrate de reemplazar <nombre-proyecto> con el nombre real de tu proyecto en Angular.
Parar el servidor de desarrollo: Antes de proceder, asegúrate de que tu servidor de desarrollo esté detenido para evitar conflictos.
Ejecutar el comando en la terminal: Usa el nombre de tu proyecto que está configurado en Angular para ejecutar el comando:
```
ng add @nguniversal/express-engine --clientProject <nombre-proyecto>
```

¿Qué modificaciones realiza Angular?

Al ejecutar el comando, Angular realiza varias modificaciones automáticas:

Genera un servidor Node.js en Express.
Configura los cambios necesarios en el archivo angular.json.
Crea tareas en los scripts de NPM para poder construir y servir la aplicación.

En Visual Studio Code, puedes visualizar fácilmente qué archivos fueron creados o modificados tras la ejecución del comando.

¿Cómo resolver errores comunes?

A veces, pueden surgir errores al intentar ejecutar el proyecto con Universal, como pruebas unitarias que fallan o referencias a elementos que solo existen en el navegador. Si sucede que el build falla, lo más probable es que se trate de un tema con las pruebas unitarias o dependencias del lado del cliente.

Errores con pruebas unitarias: Si las pruebas unitarias fallan, puedes comentar temporalmente el código relacionado con ellas para continuar el desarrollo, aunque se sugiere buscar una solución a fondo posteriormente.
Referencias del navegador en el servidor: Errores como referencias directas a window, document o elementos exclusivos del navegador necesitan ser manejados apropiadamente. Angular Universal proporciona clases para determinar dinámicamente el entorno de ejecución y adaptar el código en consecuencia.

¿Cómo saber cuándo estamos en un entorno de navegador o servidor?

Angular ofrece clases que permiten "interceptar" distintos momentos de la ejecución del código para adaptarlo según el entorno:

IS_PLATFORM_BROWSER: Esta función ayuda a determinar si el código se está ejecutando en el navegador.

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

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  if (isPlatformBrowser(this.platformId)) {
    // Ejecutar lógica específica para el navegador
  }
}

IS_PLATFORM_SERVER: Esta función permite saber si el código está siendo ejecutado en el servidor.

Aprender y aplicar estas técnicas es crucial para gestionar aplicaciones robustas que utilicen Angular Universal efectivamente, asegurando un correcto SSR y una interacción fluida entre el servidor y el cliente.