Angular 9 SSR部署Firebase云函数遇空白页及超时错误求助

Let’s break down the issues in your code and fix them step by step—blank pages in SSR setups almost always trace back to incorrect function initialization, misconfigured static asset serving, or build structure issues.

1. Critical Cloud Function Initialization Error #

Looking at your cloud function code:

export const ssr = functions.runWith(runtimeOpts).https.onRequest(universal());

You’re calling universal() immediately and passing its result to onRequest, but onRequest expects a function reference that triggers on every incoming request. This means your server isn’t being initialized correctly per-request, leading to no response for actual user traffic.

Fix it by removing the parentheses (pass the function itself, not its execution result):

export const ssr = functions.runWith(runtimeOpts).https.onRequest(universal);

2. Broken Static Asset Serving in server.ts #

Your current code only serves static files for the root path (/), but all other assets (JS bundles, CSS, images) will fall through to the SSR route handler. This makes the browser receive HTML instead of required resources, resulting in a blank page with no loaded content.

Replace this line:

server.get('/', express.static(distFolder, { maxAge: '1y', index: false }));

With a use statement that applies to all paths:

// Serve static files from /browser for ALL static asset requests
server.use(express.static(distFolder, { maxAge: '1y', index: false }));

3. Verify Build Output Structure #

Double-check that your Angular build generates the correct folder structure. Run these commands to build for SSR:

ng build --prod
ng run demossr:server:production

You should see a dist/demossr folder with two subfolders: browser (client-side assets) and server (server bundle). Confirm dist/demossr/server/main.js exists—this is what your cloud function imports.

4. Local Testing to Validate Fixes #

Before deploying, test locally to confirm the fixes work:

• Run the server directly with node dist/demossr/server/main.js and visit http://localhost:4000. If this loads your app correctly, the issue was isolated to the cloud function setup.
• If the local run still shows a blank page, check the browser console for 404 errors (missing assets) to confirm static files are being served properly.

5. Firebase Hosting Configuration (Ensure Correct Routing) #

Make sure your firebase.json routes all requests to the SSR function:

{
  "hosting": {
    "public": "dist/demossr/browser",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}

After applying these changes, rebuild your app, redeploy the cloud function and hosting, and the blank page issue should be resolved.

内容的提问来源于stack exchange，提问作者Vicky Nathaiya