I am trying to setup an Angular App on Cloudflare Pages/Worker.
I have generated a test app using the Cloudflare CLI. The CLI generates an Angular 17 app with below server.ts file:
import { renderApplication } from "@angular/platform-server";
import bootstrap from "./src/main.server";
interface Env {
ASSETS: { fetch: typeof fetch };
}
// We attach the Cloudflare `fetch()` handler to the global scope
// so that we can export it when we process the Angular output.
// See tools/bundle.mjs
async function workerFetchHandler(request: Request, env: Env) {
const url = new URL(request.url);
console.log("render SSR", url.href);
// Get the root `index.html` content.
const indexUrl = new URL("/", url);
const indexResponse = await env.ASSETS.fetch(new Request(indexUrl));
const document = await indexResponse.text();
const content = await renderApplication(bootstrap, {
document,
url: url.pathname,
});
// console.log("rendered SSR", content);
return new Response(content, indexResponse);
}
export default {
fetch: (request: Request, env: Env) =>
(globalThis as any)["__zone_symbol__Promise"].resolve(
workerFetchHandler(request, env)
),
};
The above code uses renderApplication
which returns the string output.
Can someone please guide how to pass the HTTP Status code e.g. 404 for page not found or custom request specific headers from my Angular App.
I have seen this change status code of Response in @angular/ssr in angular 17 as well but I am not sure how it will work when using Cloudflare Pages/Worker.
Thank you.