Integración de una aplicación de Angular con Fresh Framework: guía fácil
Tags: angular, deno, webapps, ionic
Published: 2023-04-30 05:35:51

---
title: Integración de una aplicación de Angular con Fresh Framework: guía fácil
published: true
description: En esta publicación, aprenderá cómo integrar sin problemas su aplicación en Angular con Fresh Framework. Descubrirá una guía paso a paso que lo guiará a través del proceso de configuración de la integración y lo ayudará a evitar obstáculos en el camino. Al final de esta publicación, tendrá una aplicación Fresh Framework completamente funcional que incorpora todo el poder de Angular.
tags: Angular, Deno, webapps, ionic
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pp276pzuezxz8krjwlj2.jpeg
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-30 05:28 +0000
---

> Si está aquí, tal vez esté donde comencé, para este tutorial asumo que ya tiene Deno y Angular instalados, este proceso también se aplica a Ionic.

Comencemos con esta integración. Solo necesita crear un nuevo proyecto con Deno. No importa si ya tiene un proyecto creado, pero tenga en cuenta que necesitaremos agregar varios archivos a la carpeta de activos más adelante. Verás.

Inicie el proyecto con Fresh usando Deno:

```bash
deno run -A -r https://fresh.deno.dev fresh-angular && cd fresh-angular
```

Complete las preguntas iniciales para configurar su proyecto, ahora, comience un nuevo proyecto con Angular o Ionic (en mi caso usaré Ionic 7 con Angular 15):


```bash
ionic start my-project tabs --type=angular --no-git
```

Ahora su estructura de archivos puede verse así:
![Una imagen de cómo puede verse la estructura de su proyecto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u7zbjcnqhdyh7njcd54.jpeg)

## Integración

Ahora debemos hacer algunos cambios, dentro de la carpeta `routes`, crear una carpeta llamada `app`, y crear un archivo llamado `[...app].ts` y pegar este código dentro del archivo recién creado:

```typescript
import { Handlers } from '$fresh/server.ts'

export const handler: Handlers = {
    async GET() {
        
        const filePath = new URL('file://'+Deno.cwd()+'/static/index.html').pathname;
        let fileSize;
        try {
          fileSize = (await Deno.stat(filePath)).size;
        } catch (e) {
          return new Response(null, { status: 500 });
        }
        const body = (await Deno.open(filePath)).readable;
        const resp = new Response(body);
        resp.headers.set("content-length", fileSize.toString());
        resp.headers.set("content-type", "text/html; charset=utf-8");
        return resp;

    }
}
```

**¡No empieces el proyecto todavía!**

Abra su terminal VSCode y escriba este comando en él: `cd App && ng build --configuration=production`

Dentro de su carpeta `/App` ahora debe ver una carpeta llamada `www`, ahora vamos a crear un ayudante para mover esa carpeta a nuestra carpeta `/static`.

En su directorio raíz, cree un archivo llamado `sync.ts` y pegue el siguiente código:

```typescript
let htmlContent = await Deno.readTextFile('./App/www/index.html');
const entries: string[] = [];

console.log('Checking directories...')
for await (const dirEntry of Deno.readDir('./App/www')) {
   if(dirEntry.name.endsWith('.js')) entries.push(`<script src="${dirEntry.name}" type="module"></script>`);
}

htmlContent = htmlContent.replace(/<script src=".+" type="module"><\/script>/gm, entries.toString()).replace('<base href="/">', '<base href="/app">');

const sourceDir = "./App/www";
const destinationDir = "./static";

console.log('Removing old files...');
for await (const dirEntry of Deno.readDir('./static')) {
    if(dirEntry.name !== 'save') Deno.removeSync('./static/' + dirEntry.name, { recursive: true });
 }

console.log('Updating files...');
for await (const dirEntry of Deno.readDir(sourceDir)) {
  const sourcePath = `${sourceDir}/${dirEntry.name}`;
  const destinationPath = `${destinationDir}/${dirEntry.name}`;

  await Deno.rename(sourcePath, destinationPath);
}

console.log('Rewriting index.html...')
await Deno.writeTextFile('./static/index.html', htmlContent);
```

Antes de finalizar, debes ir a tu `deno.json` y agregar este script dentro del objeto `task`:

```json
"sync": "cd App && ng build --configuration=production && cd .. && deno run -A sync.ts"
```

Finalmente, si llega aquí, simplemente ejecute en su terminal el proyecto raíz `deno task start` y siga el enlace que se muestra en el terminal, generalmente `http://localhost:8000` o escriba manualmente en la barra de búsqueda de su navegador `http://localhost:8000/app` para ver cómo funciona su aplicación Angular dentro de su Fresh Project.

![La aplicación angular que se ejecuta dentro de Fresh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9g9cobaxr3p9mb4fd3i.jpeg)

¡Espero que esta publicación te ayude!