API-Routen im serverseitigen Angular 18-Rendering

Injecting Environment Variables Dynamically in Cloudflare Pages

In diesem Leitfaden erfahren Sie, wie Sie API-Routen in einer serverseitig gerenderten Angular 18-Anwendung definieren und verwenden

Voraussetzungen

Sie benötigen Folgendes:

Nodejs 18 oder höher

Inhaltsverzeichnis

TODO

Erstellen Sie eine neue Angular-Anwendung

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

npm i -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.

Setzen Sie in „angularjson“ „prerender“ auf „false“, damit die Anwendung immer serverseitig gerendert wird

Fügen Sie in „serverts“ den folgenden Code hinzu, um eine API-Route unter „/api/data“ zu erstellen:

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

// ...

Nehmen Sie die folgenden Ergänzungen zu „appconfigts“ im Verzeichnis „src/app“ vor, um „HttpClient“ mit „fetch“ einzuschließen:

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

Aktualisieren Sie die „appcomponentts“ im Verzeichnis „src/app“, um sie von der API-Route abzurufen:

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

In einem Terminal:

npm run watch

In einem anderen Terminal:

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

Schließen wir nun den Entwicklungsserver, um API-Routen zu erstellen

Abschluss

In diesem Leitfaden haben Sie erfahren, wie Sie Umgebungsvariablen dynamisch in Cloudflare Pages einfügen

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