Deploy Angular Application With Server-Side Rendering (SSR) on Cloudflare Pages

To deploy your Angular application with Server-Side Rendering (SSR) on Cloudflare Pages, follow these steps:

1. Begin by initiating the Cloudflare project setup using the command npm create cloudflare@latest.
2. Choose the desired directory or path where you wish to create your project.
3. Select Website or Web App when prompted.
4. Specify Angular as your preferred development framework during the setup process.
5. Select the appropriate Angular CSS configuration for your project. This will install all necessary dependencies.
6. You’ll be asked if you want to deploy the project to Cloudflare. Choosing Yes will initiate the creation of a Cloudflare project, deploy your application, and provide a deployment URL for testing purposes.

Alternatively, if you opt for No, you can deploy your project at a later stage using the npm run deploy command within your project directory.

To locally test your project, execute the command npm run start on your machine.

Familiarize Yourself With Few Things:

Server.ts File: This file is responsible for executing your Angular application. It contains a workerFetchHandler function, which leverages Angular’s renderApplication function to launch your Angular app on the server. This process generates HTML markup corresponding to the current URL.

Tools Folder: Within this folder, you’ll find a collection of scripts. These scripts are executed upon completion of the Angular build process. They handle tasks such as preparation and copying of files to the Cloudflare directory. Take a look at the scripts section in the packages.json file for further details.

_routes.json File in src Folder: This file serves to inform Cloudflare about routes requiring Server-Side Rendering (SSR) and those to be excluded from SSR. Routes designated for SSR are processed by Cloudflare Workers, while excluded routes are served directly by Cloudflare Pages.

Use withFetch in provideHttpClient: If your app makes http calls, update provideHttpClient and include withFetch:

provideHttpClient( withFetch()),        

Custom HTTP Status Code or Headers: Should the need arise to set custom HTTP status codes or headers, you’ll need to update the server.ts file. Pass ResponseInit as platform providers to configure these settings. Follow these steps:

Update the renderApplication function as illustrated below:

const responseInitOptions: ResponseInit = { status: 200, headers: headers };
const content = await renderApplication(bootstrap, {
 document,
 url: url.pathname,
 platformProviders: [
 { provide: RESPONSE_INIT_OPTIONS, useValue: responseInitOptions }
 ]
});        

Define the injection token RESPONSE_INIT_OPTIONS in a TypeScript file:

import { InjectionToken } from '@angular/core';
export const RESPONSE_INIT_OPTIONS = new InjectionToken<ResponseInit>('RESPONSE_INIT_OPTIONS');        

Inject RESPONSE_INIT_OPTIONS into your Angular app:

private readonly responseInitOptions = inject(RESPONSE_INIT_OPTIONS, {
 optional: true,
});        

Set HTTP Status Code:

this.responseInitOptions.status = statusCode;        

Configure Custom Headers:

let newHeaders = {
 'X-Robots-Tag': 'noindex',
 'Content-Type': 'text/html; charset=utf-8'
};
this.responseInitOptions.headers = newHeaders;        

Thus far, the sole obstacle I’ve encountered pertains to https://github.com/cloudflare/workers-sdk/issues/5262; notwithstanding, the overall procedure appears remarkably straightforward. My commendations to both the Angular and Cloudflare teams especially Alan Agius Peter Bacon Darwin for facilitating such a seamless process.