Getting error while trying to browse absolute path in firebase (Angular Universal app)

[sagarvd01]

[REQUIRED] Environment info

firebase-tools: 7.2.4

Platform: Windows

[REQUIRED] Test case

I followed the official article to add universal to my angular app and then this article to deploy it to firebase.

npm run build:ssr && npm run serve:ssr and also firebase serve works fine. I can view it in my system.

After deploying, if I visit the home page, I can navigate to any route from it and everything is fine but when I enter a url which contains a path, directly, it produce the following error

Error: could not handle the request

In Firebase functions log, I'm getting the following

TypeError: handler is not a function
at cloudFunction (/srv/node_modules/firebase-functions/lib/providers/https.js:49:9)
at /worker/worker.js:783:7
at /worker/worker.js:766:11
at ZoneDelegate.invokeTask (/srv/dist/server.js:574:31)
at Zone.runTask (/srv/dist/server.js:346:47)
at ZoneTask.invokeTask (/srv/dist/server.js:649:34)
at ZoneTask.invoke (/srv/dist/server.js:638:48)
at data.args.(anonymous function) (/srv/dist/server.js:1618:25)
at _combinedTickCallback (internal/process/next_tick.js:132:7)
at process._tickDomainCallback (internal/process/next_tick.js:219:9)

The dist/server.js is autogenerated one

[REQUIRED] Steps to reproduce

This is an instance of my app https://v2.self.demo.sagarvd.me If you access it directly, it'll redirect you to /home and you can navigate to any route from navbar. But if you visit the same link with a path attached, you'll get the error mentioned above, for example https://v2.self.demo.sagarvd.me/home

[REQUIRED] Expected behavior

Firebase should handle the routing

[REQUIRED] Actual behavior

Firebase handles the routes only if visited the domain home page. Otherwise it throws error.

[bkendall]

Sorry you're having troubles! This sounds like a bug in the Functions code that you're using could you provide:

1. The relevant snipped of Functions code?
2. The version of firebase-functions in your project?
3. The contents of your firebase.json?

[sagarvd01]

Hi @bkendall ,

Here's the details you asked

content in functions/src/index.ts

const universal = require(`${process.cwd()}/dist/server`).app;
exports.ssr = functions.https.onRequest(universal);

I've one more function to handle contact form (using node mailer) and it's working fine.

Previously, I had a problem which says can't fine server/main in require("require(\"/server/main\")") in functions/dist/server.js and I fixed it by replacing it with require(path.resolve(__dirname,'server','main.js')).

Contents of firebase.json (Only rewrite rule is edited by me)

{
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "hosting": {
    "public": "dist/browser/",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

The tutorial I followed suggest to comment out the below lines in server.ts

app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

I tried with and without the lines but both aren't working.

"firebase-functions": "^3.2.0",

I can visit the home page and from there, I can navigate to any page, which means relative urls are working. But absolute urls aren't. when I enter url directly, it doesn't work.

[bkendall]

Curious... nothing sticking out at me yet... here's what I would look for:

1. Is there anything in the HTTP request/response that sticks out? Are there any headers that seem incorrect or are the paths malformed in some way?
2. The version of firebase-functions express - I know that Functions are "express-like", but it's something that can be tricky. The error message you're getting is a bit confusing because I think it's coming from the functions SDK. Could you verify both of these versions?

[sagarvd01]

Getting 500 as status while entering the url with path. Here's the response headers for both requests.

1. domain.tld (working)

accept-ranges: bytes
cache-control: max-age=3600
content-encoding: gzip
content-length: 858
content-type: text/html; charset=utf-8
date: Fri, 11 Oct 2019 18:48:56 GMT
etag: 64ef58935225ac05751baa63d709974799e4f227786aabae508e8856f66dd85f
last-modified: Tue, 08 Oct 2019 14:45:06 PDT
status: 200
strict-transport-security: max-age=31556926
vary: x-fh-requested-host, accept-encoding
x-cache: MISS
x-cache-hits: 0
x-served-by: cache-sin18044-SIN
x-timer: S1570819736.103763,VS0,VE441

2. domain.tld/path (not working)

accept-ranges: bytes
cache-control: private
content-encoding: gzip
content-type: text/plain; charset=utf-8
date: Fri, 11 Oct 2019 18:49:12 GMT
fastly-restarts: 1
server: Google Frontend
status: 500
vary: x-fh-requested-host, accept-encoding
x-cache: MISS
x-cache-hits: 0
x-cloud-trace-context: 1397acc903a0625fff2567ebfa0a48ce
x-content-type-options: nosniff
x-served-by: cache-sin18044-SIN
x-timer: S1570819749.603127,VS0,VE3484

Versions

"firebase-functions": "^3.2.0"
"express": "^4.15.2"

I can't figure out the root cause yet,

domain.tld loads without any error and relative routing works perfectly. Including Title and Meta changes. It produce error only when visiting a route directly or reloading the browser.

And I think the error in functions logs comes from firebase itself because it doesn't contain a reference to files from third party.

[sagarvd01]

A follow up:

I changed this line in functions/dist/server.js

return this._invokeTaskZS ? this._invokeTaskZS.onInvokeTask(this._invokeTaskDlgt, this._invokeTaskCurrZone, targetZone, task, applyThis, applyArgs) :
            task.callback.apply(applyThis, applyArgs);

to this

try{
    return this._invokeTaskZS ? this._invokeTaskZS.onInvokeTask(this._invokeTaskDlgt, this._invokeTaskCurrZone, targetZone, task, applyThis, applyArgs) :
            task.callback.apply(applyThis, applyArgs);
 }
 catch(err){
    console.log("574 : " + task.callback);
 }

and in firebase-functions/lib/providers/https.js, changed this

const cloudFunction = (req, res) => {
    handler(req, res);
};

to this

const cloudFunction = (req, res) => {
    try{
        handler(req, res);
    }
    catch(err){
        console.log("https : "+handler);
    }
};

And got this in firebase console

574 : function () {
setTraceHeader(res);
execute(req, res);
}

[sagarvd01]

Hi @bkendall , I spent a lot of time in it and it turned out to be a file missing error. I updated the favicon long ago and the new name of the file was fav-icon.ico instead of favicon.ico but I forgot to update it in angular.json.

The error in firebase functions' console is not helpful at all and I had to spent more than 3 days to find the root cause. Sorry for wasting your time.