Rutas API en servidores de renderizado Angular 18

API Routes in Angular 18 Server Side Rendering

En esta guía, lo guiaré en la configuración de rutas API en una aplicación Angular 18 renderizada del lado del servidor, aprovechando Express para crear puntos finales RESTful.

Requisitos previos

Necesitará lo siguiente:

Nodejs 18 o posterior

Tabla de contenido

Crear una nueva aplicación angular
Agregar una ruta API en servidores
Configurando appconfigts para HttpClient
[Obteniendo datos en componentes de aplicaciones] (#obteniendo-datos-en-componentes de aplicaciones)
Ejecutar el servidor en modo SSR

Crea una nueva aplicación angular

Comencemos creando un nuevo proyecto Angular. Ejecute los siguientes comandos:

npm install -g @angular/cli@latest
ng new angular-ssr-api-routes

ng new es la forma recomendada de desarrollar rápidamente un proyecto Angular

Cuando se le solicite, elija:

CSS para el formato de hoja de estilo
y para habilitar la representación del lado del servidor (SSR) y la generación de sitios estáticos (SSR/prerenderización)

Una vez hecho esto, vaya al directorio del proyecto e inicie la aplicación en modo de desarrollo ejecutando el siguiente comando:

cd angular-ssr-api-routes
npm run start

La aplicación debería estar ejecutándose en localhost:4200

En angularjson, configure "prerender": false para garantizar que la aplicación solo use renderizado del lado del servidor sin prerenderizado

Agregar una ruta API en servidores

A continuación, defina una ruta API en servits para servir datos para su aplicación SSR. Abra servits y agregue el siguiente código:

// File: server.ts // [!code focus]

// ...

// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('**', express.static(browserDistFolder, {
    maxAge: '1y',
    index: 'index.html',
}));

server.get('/api/data', (req, res) => { // [!code ++] // [!code focus]
    res.json({ code: 1 }); // [!code ++] // [!code focus]
}) // [!code ++] // [!code focus]

// ...

Esta ruta (/api/data) devolverá una respuesta JSON { code: 1 }, que puede ser recuperada por la aplicación Angular

Configurando appconfigts para HttpClient

Para recuperar datos de nuestro nuevo punto final API, asegúrese de que HttpClient esté configurado usando fetch. Abra appconfigts y agregue provideHttpClient:

// File: app.config.ts // [!code focus]

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http'; // [!code ++] // [!code focus]

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(withFetch()), // [!code ++] // [!code focus]
  ],
};

Obteniendo datos en componentes de la aplicación

Para recuperar datos de la ruta API en el lado del cliente, abra appcomponentts y configure una función simple de obtención de datos que se ejecute durante la inicialización del componente:

// File: app.component.ts  // [!code focus]

import { isPlatformBrowser } from '@angular/common'; // [!code ++] // [!code focus]
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; // [!code ++] // [!code focus]
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  isBrowser: boolean; // [!code ++] // [!code focus]
  title = 'with-angular';
  constructor(@Inject(PLATFORM_ID) platformId: Object) { // [!code ++] // [!code focus]
    this.isBrowser = isPlatformBrowser(platformId); // [!code ++] // [!code focus]
  } // [!code ++] // [!code focus]
  async ngOnInit() { // [!code ++] // [!code focus]
    if (this.isBrowser) { // [!code ++] // [!code focus]
      const fetchCall = await fetch('/api/data'); // [!code ++] // [!code focus]
      const fetchResp = await fetchCall.json(); // [!code ++] // [!code focus]
      // Do something // [!code ++] // [!code focus]
    } // [!code ++] // [!code focus]
  } // [!code ++] // [!code focus]
}

En esta configuración:

isPlatformBrowser se utiliza para garantizar que la llamada a la API solo se realice en el lado del cliente, no en el lado del servidor.
El componente obtiene datos del punto final /api/data durante la inicialización y los registra en la consola.

Ejecutando el servidor en modo SSR

Para probar sus rutas API en modo de renderizado del lado del servidor, necesita compilar y servir la aplicación Angular:

En una terminal:

npm run watch

En una terminal separada, ejecute:

npm run serve:ssr:angular-ssr-api-routes

Su aplicación, ahora con renderizado del lado del servidor y enrutamiento API, debería ser accesible en localhost:4200

Conclusión

En esta guía, cubrimos cómo configurar rutas API para la renderización del lado del servidor en una aplicación Angular 18. Con este enfoque, puede servir datos dinámicamente desde el servidor y mejorar el rendimiento de su aplicación con contenido renderizado en el servidor.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter