---
title: "Despliega una aplicación Angular 20+ renderizada en el servidor en Cloudflare Workers"
description: "Aprende a desplegar una aplicación Angular 20+ renderizada en el servidor en Cloudflare Workers, sirviendo recursos estáticos desde el edge y ejecutando SSR."
source: "https://www.launchfa.st/es/blog/angular-cloudflare-workers"
author: "Rishi Raj Jain"
created_at: 2026-07-03T00:00:00.000Z
updated_at: 2026-07-03T00:00:00.000Z
keywords: "angular, cloudflare workers, ssr, server-side rendering, wrangler, edge computing"
---
> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.
En esta guía te acompañaré por los pasos para desplegar una aplicación Angular 20+ renderizada en el servidor en Cloudflare Workers, una potente plataforma serverless que te permite ejecutar tu app de Angular en la red edge global de Cloudflare.
## Requisitos previos
Necesitarás lo siguiente:
- [Node.js 22](https://nodejs.org/en/blog/announcements/v22-release-announce) o posterior
- Una [cuenta de Cloudflare](https://dash.cloudflare.com/sign-up)
## Aplicación de demostración
Puedes ver un ejemplo funcional de este despliegue en acción en [https://angular-ssr-app.launchfast.workers.dev/posts](https://angular-ssr-app.launchfast.workers.dev/posts). Demuestra una aplicación Angular totalmente renderizada en el servidor ejecutándose en Cloudflare Workers sin cold starts.
## Entender la arquitectura
Al desplegar Angular SSR en Cloudflare Workers, la aplicación se divide en dos partes:
1. **Build del navegador** (`dist//browser/*`) - Recursos estáticos servidos directamente por el manejo de assets de Cloudflare, sin pasar por el Worker
2. **Build del servidor** (`dist//server/*`) - Empaquetado dentro del Worker para el renderizado en el servidor
## El puente del Cloudflare Worker
Crea un punto de entrada para tu despliegue de Cloudflare en `cloudflare/worker.ts`. Este archivo conecta tu aplicación Angular SSR con el runtime de Cloudflare Workers. Esto es lo que hace:
```typescript
// File: cloudflare/worker.ts
import {
AngularAppEngine,
createRequestHandler,
ɵsetAngularAppEngineManifest as setAngularAppEngineManifest,
} from '@angular/ssr';
// Generated build artifact containing the engine manifest
import engineManifest from '../dist/angular-ssr-app/server/angular-app-engine-manifest.mjs';
setAngularAppEngineManifest(engineManifest);
const angularApp = new AngularAppEngine();
/**
* createRequestHandler returns a Web-standard (Request) => Response handler,
* which is exactly the shape Cloudflare's fetch handler expects.
*/
const fetch = createRequestHandler(async (request: Request) => {
const response = await angularApp.handle(request);
return response ?? new Response('Not found', { status: 404 });
});
export default { fetch };
```
### Puntos clave
- `AngularAppEngine` se inicializa para gestionar el renderizado SSR
- El `engine manifest` se importa desde la salida de tu build: contiene plantillas HTML incrustadas y metadatos del build
- `createRequestHandler` envuelve el motor de Angular en un handler `fetch` conforme a los estándares web que Cloudflare espera
- Cualquier solicitud que no coincida con una ruta devuelve un 404
## Actualizar la configuración de Wrangler
Actualiza tu archivo `wrangler.jsonc` a lo siguiente:
```jsonc title="wrangler.jsonc" {7,9-11,13-16}
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "angular-ssr-app",
"main": "cloudflare/worker.ts",
"compatibility_date": "2025-05-05",
// Enable Node.js compatibility for Angular's SSR dependencies
"compatibility_flags": ["nodejs_compat"],
// Define import.meta.url for polyfills compatibility
"define": {
"import.meta.url": "\"file:///worker.mjs\""
},
// Serve browser build as static assets
"assets": {
"directory": "./dist/angular-ssr-app/browser",
"binding": "ASSETS"
},
}
```
### Configuración explicada
- **`compatibility_flags: ["nodejs_compat"]`** - Necesario porque los polyfills de servidor de Angular usan built-ins de Node.js
- **`define`** - Proporciona un fallback para `import.meta.url`, que se colapsa durante el empaquetado
- **`assets.directory`** - Apunta a tu build del navegador para servir archivos estáticos
## Configuración del build para Cloudflare
Tu `angular.json` configura cómo Angular compila para la plataforma de Cloudflare:
```json {16,17}
{
"projects": {
"angular-ssr-app": {
"architect": {
"build": {
"builder": "@angular/build:application",
"options": {
"browser": "src/main.ts",
"server": "src/main.server.ts",
"outputMode": "server",
"ssr": {
"entry": "src/server.ts"
},
"security": {
"allowedHosts": [
"localhost",
"angular-ssr-app.launchfast.workers.dev"
]
}
}
}
}
}
}
}
```
### Protección contra SSRF con Allowed Hosts
La opción `allowedHosts` evita los ataques de Server-Side Request Forgery (SSRF):
- Solo los nombres de host aquí listados pueden renderizarse en el servidor
- Añade tu dominio de producción y tus dominios de preview
- En el momento del despliegue, puedes añadir hosts adicionales mediante la variable de entorno `NG_ALLOWED_HOSTS` sin recompilar
## Compilar y desplegar
Tu `package.json` incluye scripts prácticos para probar y desplegar:
```json
{
"scripts": {
"build": "ng build",
"preview:cf": "npm run build && wrangler dev",
"deploy:cf": "npm run build && wrangler deploy"
}
}
```
### Pruebas locales
Para probar tu aplicación localmente antes de desplegar:
```bash
npm run preview:cf
```
Esto compila tu aplicación Angular e inicia el servidor de desarrollo de Wrangler en `http://localhost:8787`.
### Despliegue en Cloudflare
Cuando estés listo para desplegar en producción:
```bash
npm run deploy:cf
```
Esto:
1. Compila tu aplicación Angular SSR para producción
2. Empaqueta el código del servidor dentro del Worker usando esbuild
3. Sube tus recursos del navegador a Cloudflare
4. Despliega tu Worker globalmente en la red de Cloudflare
## Variables de entorno y Allowed Hosts
Para despliegues de staging o preview con dominios distintos, puedes especificar hosts permitidos adicionales en el momento del despliegue sin recompilar:
```bash
NG_ALLOWED_HOSTS=staging.example.com,preview.example.com npm run deploy:cf
```
La variable de entorno acepta nombres de host separados por comas y se combina con los hosts definidos en `angular.json` en tiempo de ejecución.
## Conclusión
¡Genial! Ahora tienes un proyecto Angular 20+ SSR que se despliega automáticamente en Cloudflare sin ninguna configuración adicional dentro del ámbito de Angular.
Si tienes preguntas o encuentras problemas, consulta la [documentación de Angular SSR](https://angular.io/guide/ssr) y la [documentación de Cloudflare Workers](https://developers.cloudflare.com/workers/).