Rutas API en la representación del lado del servidor Angular 18

En esta guía, aprenderá cómo definir y usar rutas API en una aplicación Angular 18 renderizada del lado del servidor.

Requisitos previos

Necesitará lo siguiente:

• Nodejs 18 o posterior

Tabla de contenido

• HACER

Crea una nueva aplicación angular

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

npm i -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, establezca prerender en false para que la aplicación siempre se represente en el lado del servidor

En servits, agregue el siguiente código para crear una ruta API en /api/data:

// File: server.ts

// ...

// 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 ++]
    res.json({ code: 1 }); // [!code ++]
}) // [!code ++]

// ...

Realice las siguientes adiciones a appconfigts en el directorio src/app para incluir HttpClient usando fetch:

// File: app.config.ts

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 ++]

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

Actualice appcomponentts en el directorio src/app para recuperarlos de la ruta API:

// File: app.component.ts

import { isPlatformBrowser } from '@angular/common'; // [!code ++]
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; // [!code ++]
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 ++]
  title = 'with-angular';
  constructor(@Inject(PLATFORM_ID) platformId: Object) { // [!code ++]
    this.isBrowser = isPlatformBrowser(platformId); // [!code ++]
  } // [!code ++]
  async ngOnInit() { // [!code ++]
    if (this.isBrowser) { // [!code ++]
      const fetchCall = await fetch('/api/data'); // [!code ++]
      const fetchResp = await fetchCall.json(); // [!code ++]
      // Do something // [!code ++]
    } // [!code ++]
  } // [!code ++]
}

En una terminal:

npm run watch

En otra terminal:

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

Ahora, cerremos el servidor de desarrollo para crear rutas API.

Conclusión

En esta guía, aprendió cómo inyectar variables de entorno dinámicamente en Cloudflare Pages.

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