API-Routen im serverseitigen Angular 18-Rendering

API Routes in Angular 18 Server Side Rendering

In diesem Leitfaden werde ich Sie durch die Einrichtung von API-Routen in einer serverseitig gerenderten Angular 18-Anwendung führen und dabei Express nutzen, um RESTful-Endpunkte zu erstellen

Voraussetzungen

Sie benötigen Folgendes:

Nodejs 18 oder höher

Erstellen Sie eine neue Angular-Anwendung

Beginnen wir mit der Erstellung eines neuen Angular-Projekts. Führen Sie die folgenden Befehle aus:

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

„ng new“ ist die empfohlene Methode, um ein Angular-Projekt schnell zu erstellen

Wenn Sie dazu aufgefordert werden, wählen Sie:

„CSS“ für das Stylesheet-Format
„y“ zum Aktivieren von serverseitigem Rendering (SSR) und statischer Site-Generierung (SSR/Prerendering)

Sobald dies erledigt ist, wechseln Sie in das Projektverzeichnis und starten Sie die App im Entwicklungsmodus, indem Sie den folgenden Befehl ausführen:

cd angular-ssr-api-routes
npm run start

Die App sollte auf localhost:4200 ausgeführt werden.

Legen Sie in „angularjson“ „prerender“: false fest, um sicherzustellen, dass die Anwendung nur serverseitiges Rendering ohne Vorrendering verwendet

Hinzufügen einer API-Route in Servern

Definieren Sie als Nächstes eine API-Route in „serverts“, um Daten für Ihre SSR-Anwendung bereitzustellen. Öffnen Sie „serverts“ und fügen Sie den folgenden Code hinzu:

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

// ...

Diese Route („/api/data“) gibt eine JSON-Antwort „{ code: 1 }“ zurück, die von der Angular-Anwendung abgerufen werden kann

Appconfigts für HttpClient konfigurieren

Um Daten von unserem neuen API-Endpunkt abzurufen, stellen Sie sicher, dass „HttpClient“ mit „fetch“ eingerichtet ist. Öffnen Sie „appconfigts“ und fügen Sie „provideHttpClient“ hinzu:

// 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]
  ],
};

Daten in Appcomponentts abrufen

Um Daten von der API-Route auf der Clientseite abzurufen, öffnen Sie „appcomponentts“ und richten Sie eine einfache Datenabruffunktion ein, die bei der Komponenteninitialisierung ausgeführt wird:

// 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]
}

In diesem Setup:

„isPlatformBrowser“ wird verwendet, um sicherzustellen, dass der API-Aufruf nur auf der Clientseite und nicht auf der Serverseite erfolgt – Die Komponente ruft bei der Initialisierung Daten vom Endpunkt „/api/data“ ab und protokolliert sie in der Konsole

Ausführen des Servers im SSR-Modus

Um Ihre API-Routen im serverseitigen Rendering-Modus zu testen, müssen Sie die Angular-Anwendung erstellen und bereitstellen:

In einem Terminal:

npm run watch

Führen Sie in einem separaten Terminal Folgendes aus:

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

Auf Ihre Anwendung, jetzt mit serverseitigem Rendering und API-Routing, sollte unter localhost:4200 zugegriffen werden können.

Abschluss

In diesem Leitfaden haben wir erläutert, wie Sie API-Routen für das serverseitige Rendering in einer Angular 18-Anwendung einrichten. Mit diesem Ansatz können Sie Daten dynamisch vom Server bereitstellen und die Leistung Ihrer Anwendung mit vom Server gerenderten Inhalten verbessern

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.