CODEWITHSUNDEEP
angularfirebasegoogle-cloud-functionsangular-universal
Nikita
Nikita

Reputation: 308

Timeout when routing. Angular 9 Universal + Firebase

I'm trying to set up Angular 9 Universal + Firebase application. I've added Universal packages to my project and Firebase cloud function to support SSR. Here is the code of my cloud function:

import * as functions from 'firebase-functions';
import * as path from 'path';

const universal = require(path.resolve(__dirname, '../dist/server/main')).app;

export const ssr = functions.runWith({ memory: "2GB", timeoutSeconds: 120 }).https.onRequest(universal);

My firebase config: 

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

Build passes without errors and application seems to be working fine but routing doesn't work. Main route (/) loads well and I can navigate to other routes without errors but if I try to open any other route (for example /books) in a new tab or reload already opened route I'll get timeout exception. Here's the screenshot: error

I don't know why do I have this error. I've already tried to increase timeout to 120s but it didn't help. Any advises how can I fix it?

Upvotes: 3

Views: 946

Answers (1)

LucianoFromTrelew
LucianoFromTrelew

Reputation: 41

If you're using the scaffolded version of angular universal and you didn't change anything from the server.ts file, you have to pass the result of calling your universal function to the onRequest function.

So, you would have to change this:

const universal = require(path.resolve(__dirname, '../dist/server/main')).app;

export const ssr = functions.runWith({ memory: "2GB", timeoutSeconds: 120 }).https.onRequest(universal);

To this (you have to call the universal function):

const universal = require(path.resolve(__dirname, '../dist/server/main')).app;

export const ssr = functions.runWith({ memory: "2GB", timeoutSeconds: 120 }).https.onRequest(universal());

Why is this necessary? Your app function does not receive any arguments, and returns a server object (which is actually an Express-application object). The onRequest function receives an anonymous function that receives a request and a response. So passing the app function to onRequest doesn't make much sense.

I came across with this exact same problem yesterday, and I really don't know how Firebase is able to serve the root route (/), but not any child route.

Anyway, I hope this answer fixes your problem!

Luciano.

Upvotes: 4

Related Questions