--- title: "Rutas API en servidores de renderizado Angular 18" description: "Así enriquecerá el servidor Rendering de Angular 18 ein" source: "https://www.launchfa.st/es/blog/server-side-rendering-angular" author: "Rishi Raj Jain" created_at: 2024-06-25T00:00:00.000Z --- > **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. 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](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior ## Tabla de contenido - [Crear una nueva aplicación angular](#crear-una-nueva-aplicación-angular) - [Agregar una ruta API en servidores](#agregar-una-ruta-api-en-servidores) - [Configurando appconfigts para HttpClient](#configuring-appconfigts-for-httpclient) - [Obteniendo datos en componentes de aplicaciones] (#obteniendo-datos-en-componentes de aplicaciones) - [Ejecutar el servidor en modo SSR](#ejecutar-el-servidor-en-modo-ssr) ## Crea una nueva aplicación angular Comencemos creando un nuevo proyecto Angular. Ejecute los siguientes comandos: ```bash 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: ```bash cd angular-ssr-api-routes npm run start ``` La aplicación debería estar ejecutándose en [localhost:4200](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: ```tsx // 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`: ```tsx // 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: ```tsx // 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: ```bash npm run watch ``` En una terminal separada, ejecute: ```bash 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](http://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](https://twitter.com/direct_messages/create/rishi_raj_jain_)