Infinity loading. Angular 9 Universal + Firebase

[n3nikita]

Version info

Angular:
"@angular/cdk": "^9.2.1"

Firebase:
"firebase": "^7.14.1"

AngularFire:
"@angular/fire": "^6.0.0"

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.

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?

Debug output

Errors in the JavaScript console

!  functions: Your function timed out after ~120s. To configure this timeout, see
      https://firebase.google.com/docs/functions/manage-functions#set_timeout_and_memory_allocation.
>  E:\..\functions\dist\server\main.js:1
>  !function(e,a){for(var i in a)e[i]=a[i]}(exports,function(modules){var installedModules={},installedChunks={0:0};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return __webpack_require__.e=function requireEnsure(chunkId){if(0!==installedChunks[chunkId]){var chunk=require("./"+({1:"vendors~firebase-auth"}[chunkId]||chunkId)+".js"),moreModules=chunk.modules,chunkIds=chunk.ids;for(var moduleId in moreModules)modules[moduleId]=moreModules[moduleId];for(var i=0;i<chunkIds.length;i++)installedChunks[chunkIds[i]]=0}return Promise.all([])},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,nam
> 
>  Error: Function timed out.
>      at Timeout.<anonymous> (C:\Users\..\AppData\Roaming\npm\node_modules\firebase-tools\lib\emulator\functionsEmulatorRuntime.js:619:23)
>      at ZoneDelegate.invokeTask (E:\..\functions\dist\server\main.js:1:2039919)
>      at Zone.runTask (E:\..\functions\dist\server\main.js:1:2032484)
>      at ZoneTask.invokeTask (E:\..\functions\dist\server\main.js:1:2041504)
>      at Timeout.ZoneTask.options.useG.invoke (E:\..\functions\dist\server\main.js:1:2041333)
>      at Timeout.timer [as _onTimeout] (E:\..\functions\dist\server\main.js:1:2077645)
>      at listOnTimeout (internal/timers.js:531:17)
>      at processTimers (internal/timers.js:475:7)
Shutting down...

Screenshots

Expected behavior

Routing works without errors

Actual behavior

Timeout when open any route in a new tab or reload.

[sbarbat]

Can you share what you are doing on your ngInit on the BookComponent? Are you using firestore?

[vickytak]

I am getting same issue, I am not using @angular/fire, I am just using firebase sdk in my project

[AnriTapel]

PLEASE HELP!!! https://stackoverflow.com/questions/62646379/cant-deploy-angular-9-app-with-angular-universal-to-firebase-with-firebase-func

[khageshgopalpatel]

try changing this line

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

to

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

[jamesdaniels]

Closing as we've addressed most SSR issues at this point.

[johanchouquet]

Hi @jamesdaniels ,

I'm struggling with the exact same behaviour at this point, with Angular 12.2.4 / Firebase 9.1 / Angular 7.1.1.

The rendering of the app with SSR is hanging and we get timeouts everytime there's a query.

I tried to place import '@angular/fire/firestore-protos'; in the server.ts file (like you did in the repo). It added the src folder with all protos inside, but on deploy, GCP logs show that it is inflating at the right place (/workspace/dist/apps/functions/src/...). But I still got the timeout without any errors.

I also tried to remove that 1st line and add back the externalDependencies in the server target of my project in the angular.json file. Didn't have any effect neither.

I followed those links to find this issue:

• SSR / Simple firestore get() query not rendered firebase/firebase-js-sdk#3616
• AngularFireStore breaks SSR, does not render web page #2420

On the Firebase side, the issue is still open. So, there's still something going on there.

Any help would be much appreciated.

[MNorgren]

I also have been experiencing this. I am not sure if I have ever had it working, but it seems that my cloud function times out anytime I request a page that executes a query. Is there any known work around?