fix: apply headers for prerendered routes

Author: pieh

demo/src/app/app.routes.server.ts

@@ -1,12 +1,28 @@
 import { RenderMode, ServerRoute } from '@angular/ssr'
 
 export const serverRoutes: ServerRoute[] = [
+  // redirects don't seem to work with Prerender mode
+  // { path: '', renderMode: RenderMode.Prerender },
   // dashboard component demonstrates "netlify.request" and "netlify.context" injection injection
   // which only really work for SSR, so we are forcing SSR mode here
-  { path: 'dashboard', renderMode: RenderMode.Server },
+  {
+    path: 'dashboard',
+    renderMode: RenderMode.Server,
+    headers: {
+      foo: 'bar',
+    },
+  },
   { path: 'detail/:id', renderMode: RenderMode.Server },
   {
-    path: '**',
+    path: 'heroes',
     renderMode: RenderMode.Prerender,
+    headers: {
+      foo: 'baz',
+    },
+  },
+  // fallback
+  {
+    path: '**',
+    renderMode: RenderMode.Server,
   },
 ]

src/helpers/getPrerenderedRoutes.js

@@ -0,0 +1,26 @@
+const { existsSync } = require('node:fs')
+const { join } = require('node:path')
+
+const { readJson } = require('fs-extra')
+
+/**
+ * @param {string} outputDir
+ * @returns {Promise<Record<string, { headers?: Record<string, string> }>>}
+ */
+const getPrerenderedRoutes = async (outputDir) => {
+  const file = join(outputDir, 'prerendered-routes.json')
+  if (!existsSync(file)) return {}
+  const { routes: prerenderedRoutes } = await readJson(file)
+
+  if (Array.isArray(prerenderedRoutes)) {
+    // Before Angular@19 prerendered-routes is an array of strings
+    return prerenderedRoutes.reduce((acc, route) => {
+      acc[route] = {}
+      return acc
+    }, {})
+  }
+
+  return prerenderedRoutes
+}
+
+module.exports = getPrerenderedRoutes

src/helpers/setUpEdgeFunction.js

@@ -5,10 +5,10 @@ const { writeFile, mkdir, readFile } = require('node:fs/promises')
 const { join, relative, sep, posix } = require('node:path')
 const process = require('node:process')
 
-const { readJson } = require('fs-extra')
-
 const packageJson = require('../../package.json')
 
+const getPrerenderedRoutes = require('./getPrerenderedRoutes')
+
 /**
  * Recursively lists all files in a directory.
  */
@@ -47,35 +47,8 @@ const getProject = (angularJson, failBuild) => {
 
 module.exports.getProject = getProject
 
-/**
- * @param {string} outputDir
- * @returns {Promise<string[]>}
- */
-const getPrerenderedRoutes = async (outputDir) => {
-  const file = join(outputDir, 'prerendered-routes.json')
-  if (!existsSync(file)) return []
-  const { routes: prerenderedRoutes } = await readJson(file)
-
-  if (!Array.isArray(prerenderedRoutes)) {
-    // Angular@19 changes shape of prerendered-routes from array of strings to object with routes as keys
-    return Object.keys(prerenderedRoutes)
-  }
-
-  // Before Angular@19 prerendered-routes is an array of strings
-  return prerenderedRoutes
-}
-
 // eslint-disable-next-line max-lines-per-function
-const setUpEdgeFunction = async ({ angularJson, constants, failBuild, usedEngine }) => {
-  const project = getProject(angularJson)
-  const {
-    architect: { build },
-  } = project
-  const outputDir = build?.options?.outputPath
-  if (!outputDir || !existsSync(outputDir)) {
-    return failBuild('Could not find build output directory')
-  }
-
+const setUpEdgeFunction = async ({ outputDir, constants, failBuild, usedEngine }) => {
   const serverDistRoot = join(outputDir, 'server')
   if (!existsSync(serverDistRoot)) {
     console.log('No server output generated, skipping SSR setup.')
@@ -92,7 +65,9 @@ const setUpEdgeFunction = async ({ angularJson, constants, failBuild, usedEngine
     (path) => `/${relative(join(outputDir, 'browser'), path)}`,
   )
 
-  const excludedPaths = ['/.netlify/*', ...staticFiles, ...(await getPrerenderedRoutes(outputDir))].map(toPosix)
+  const excludedPaths = ['/.netlify/*', ...staticFiles, ...Object.keys(await getPrerenderedRoutes(outputDir))].map(
+    toPosix,
+  )
 
   // buy putting this into a separate module that's imported first,
   // we ensure this is initialised before any other module

src/helpers/setUpHeaders.js

@@ -0,0 +1,17 @@
+const getPrerenderedRoutes = require('./getPrerenderedRoutes')
+
+const setUpHeaders = async ({ outputDir, netlifyConfig }) => {
+  const prerenderRoutes = await getPrerenderedRoutes(outputDir)
+
+  for (const [route, routeConfig] of Object.entries(prerenderRoutes)) {
+    if (routeConfig.headers) {
+      netlifyConfig.headers = netlifyConfig.headers ?? []
+      netlifyConfig.headers.push({
+        for: route,
+        values: routeConfig.headers,
+      })
+    }
+  }
+}
+
+module.exports = setUpHeaders

src/index.js

@@ -1,10 +1,13 @@
+const { existsSync } = require('node:fs')
+
 const ensureNoCompetingPlugin = require('./helpers/ensureNoCompetingPlugin')
 const fixOutputDir = require('./helpers/fixOutputDir')
 const getAngularJson = require('./helpers/getAngularJson')
 const getAngularRoot = require('./helpers/getAngularRoot')
 const getAngularVersion = require('./helpers/getAngularVersion')
 const { fixServerTs, revertServerTsFix } = require('./helpers/serverModuleHelpers')
-const { setUpEdgeFunction } = require('./helpers/setUpEdgeFunction')
+const { getProject, setUpEdgeFunction } = require('./helpers/setUpEdgeFunction')
+const setUpHeaders = require('./helpers/setUpHeaders')
 const validateAngularVersion = require('./helpers/validateAngularVersion')
 
 let isValidAngularProject = true
@@ -48,8 +51,19 @@ module.exports = {
     const siteRoot = getAngularRoot({ failBuild, netlifyConfig })
     const angularJson = getAngularJson({ failPlugin, siteRoot })
 
+    const project = getProject(angularJson)
+    const {
+      architect: { build },
+    } = project
+    const outputDir = build?.options?.outputPath
+    if (!outputDir || !existsSync(outputDir)) {
+      return failBuild('Could not find build output directory')
+    }
+
+    await setUpHeaders({ outputDir, netlifyConfig })
+
     await setUpEdgeFunction({
-      angularJson,
+      outputDir,
       constants,
       failBuild,
       usedEngine,