CD
Cloudflare Developers•7mo ago
heno-dm

routing problem with angular ssr and cf pages functions

I'm trying to develop an Angular SSR website on Cloudflare Pages, with an API (OAuth-based) implemented via Pages Functions. The frontend should be available at: https://timelogs-stateless.pages.dev/ The API should be available at: https://timelogs-stateless.pages.dev/auth/login (via functions/auth/login.ts, etc.) My problem is: I can't get both Angular SSR and Functions to work together properly — I can only make one or the other work, depending on which _routes.json Cloudflare picks up. Here’s what I’m using: functions/_routes.json { "version": 1, "include": [ "/auth", "/user", "/graphql" ] } src/_routes.json { "version": 1, "include": [ "/" ], "exclude": [ "/.*" ] } My build/deploy command: ng build && node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs && wrangler pages deploy dist/cloudflare Since _routes.json from src/ ends up in dist/cloudflare, it always overrides the one in functions/, so I can’t have both Angular and API routing coexist correctly. I thought about rendering the frontend via a function on /, but I believe Angular SSR already handles that properly without needing a dedicated function route. How can I configure this so that both the Angular frontend and the API (under /auth, etc.) work together as intended?
1 Reply
heno-dm
heno-dmOP•7mo ago
OK, I found the issue and a workaround. Angular SSR generates a _worker.js file (I believe this is part of the "advanced mode"). According to the Cloudflare documentation, the "functions" mode and "advanced" mode aren't compatible. So instead of using Pages Functions, I just define my own custom routes directly in the workerFetchHandler function inside the server.ts file of the Angular project, like this: 
if (url.pathname === "/api/hello") {
  return new Response(JSON.stringify({ message: "Hello from Cloudflare!" }), {
    headers: { "Content-Type": "application/json" },
  });
}
if (url.pathname === "/api/hello") {
  return new Response(JSON.stringify({ message: "Hello from Cloudflare!" }), {
    headers: { "Content-Type": "application/json" },
  });
}

Did you find this page helpful?