--- title: "API-Routen im serverseitigen Angular 18-Rendering" description: "So richten Sie das serverseitige Rendering von Angular 18 ein" source: "https://www.launchfa.st/de/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 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](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher ## Inhaltsverzeichnis - [Eine neue Angular-Anwendung erstellen](#create-a-new-angular-application) - [Hinzufügen einer API-Route in Servern](#adding-an-api-route-in-serverts) - [Appconfigts für HttpClient konfigurieren](#configuring-appconfigts-for-httpclient) - [Daten in Appcomponentts abrufen](#fetching-data-in-appcomponentts) - [Den Server im SSR-Modus ausführen](#running-the-server-in-ssr-mode) ## Erstellen Sie eine neue Angular-Anwendung Beginnen wir mit der Erstellung eines neuen Angular-Projekts. Führen Sie die folgenden Befehle aus: ```bash 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: ```bash cd angular-ssr-api-routes npm run start ``` Die App sollte auf [localhost:4200](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: ```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] // ... ``` 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: ```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] ], }; ``` ## 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: ```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] } ``` 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: ```bash npm run watch ``` Führen Sie in einem separaten Terminal Folgendes aus: ```bash npm run serve:ssr:angular-ssr-api-routes ``` Auf Ihre Anwendung, jetzt mit serverseitigem Rendering und API-Routing, sollte unter [localhost:4200](http://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](https://twitter.com/direct_messages/create/rishi_raj_jain_).