Angular 11 + Angular Universal + AngularFire + Firebase Cloud Functions not working

Question

I've been struggling for days now to get Angular Universal working on Firebase with Angular 11.2.3 and the latest version of AngularFire namely 6.1.4 in a fresh blank project.

The steps I used to create the project and schematics are:

ng new rro-ssr --strict --routing=true --style=sass

ng add @nguniversal/express-engine

firebase init

Initialized Firebase Cloud Functions and Firebase Hosting

ng add @angular/fire

Clicked Yes, to create a Firebase Cloud Function to redirect the hosting to

If I'm using ng deploy and check out the hosting site it works fine, Angular Universal is doing the Server-Side rendering.

But why is there no way to specify the Cloud Functions folder inside Angular? The project I am working on already has Cloud Functions in the default folder called functions in the root directory of the Angular application. Also the generated Cloud Functions from the AngularFire SSR builder are using Javascript while our project is using Typescript.

As it is, I cannot define two separate folders for Firebase Cloud Functions, and I don't want the @angular/fire:deploy builder to overwrite my existing Cloud Functions.

Furthermore, if I'm trying to deploy the npm scripts made by Angular Universal (parts of the process are described here https://github.com/angular/angularfire/blob/master/docs/universal/cloud-functions.md ), it somehow is not executing the rewrite as described in the link.

firebase.json

{
  "functions": {
    "source": "functions"
  },
  "hosting": [
    {
      "target": "rro-ssr",
      "public": "functions\dist\rro-ssr\browser",
      "ignore": [
        "**/.*"
      ],
      "headers": [
        {
          "source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=31536000,immutable"
            }
          ]
        }
      ],
      "rewrites": [
        {
          "source": "**",
          "function": "ssr"
        }
      ]
    }
  ]
}

I was using the link in the "Additional Resources" from Fireship: https://fireship.io/lessons/angular-universal-firebase/

Cloud Function functions/src/index.ts

const functions = require('firebase-functions');

// Increase readability in Cloud Logging
require("firebase-functions/lib/logger/compat");

const universal = require('../dist/rro-ssr/server/main').app();

exports.ssr = functions
  .region('us-central1')
  .runWith({
    timeoutSeconds: 60,
    memory: '256MB'
  })
  .https
  .onRequest(universal);

Problem: Even if I just copy everything the @angular/fire:deploy builder is putting inside the dist/{project-name} folder and executing firebase deploy, it's not doing the SSR on the hosting site, if I'm building and deploying manually, and not using the AngularFire SSR builder.

The npm script that I'm using in my package.json:

"deploy": "npm run build:ssr && npm run --prefix functions build:ssr && firebase deploy",

The npm script that I'm using in my functions/package.json:

"build:ssr": "node cp-angular.js && tsc",

The copy script functions/cp-angular.js:

// copy files from src/dist folder to functions/dist folder in order to serve them via Firebase Cloud Functions

const fs = require('fs-extra');

(async() => {

    const src = '../dist';
    const copy = './dist';

    await fs.remove(copy);
    await fs.copy(src, copy);
    
    // finally remove the original dist folder
    // await fs.remove(src);

})();

Any help would be greatly appreciated!

UPDATE

I put the code that is not working in this repository (empty app-root): https://github.com/sanderschnydrig/ssr_manual

Please use npm run build:ssr followed by firebase deploy in a firebase project of your choice to reproduce. The .firebaserc needs to be updated for this to work.

And the code that is working in this repository: https://github.com/sanderschnydrig/ssr_angularfire

Please use ng deploy to reproduce. Also the .firebaserc needs to be updated as well.

Angular 11 + Angular Universal + AngularFire + Firebase Cloud Functions not working

0 Answers