Problem with Angular 11 Universal SSR + PWA. Deploying SSR as Cloud Function Functions did not deploy properly

Question

I want to deploy in Firebase an PWA app developed with Angular 11, using Angular Universal for creating SSR, trying to deploy it as a Firebase-Cloud Function.

Testing in localhost is OK, but when is deployed in Firebase, I get the error: "Functions did not deploy properly", and "Functions deploy had errors with the following functions: ssr" with no useful details:

+  hosting[sample-ssr-pwa]: file upload complete
i  functions: uploading functions in project: ssr(us-central1)
i  functions: creating Node.js 10 function ssr(us-central1)...
!  functions[ssr(us-central1)]: Deployment error.
Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error
cause:
https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs.
Additional troubleshooting documentation can  be found at
https://cloud.google.com/functions/docs/troubleshooting#logging.
Please visit https://cloud.google.com/functions/docs/troubleshooting
for in-depth troubleshooting documentation.

Functions deploy had errors with the following functions:
       ssr

What I have tried:

This is my repo (https://github.com/Sangarllo/ng-sample-ssr-pwa) done with just with 3 steps:

ng add @nguniversal/express-engine
ng add @angular/pwa
ng add @angular/fire (and setting environment with firebase project)

and finally, my app.module.ts is:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

With this settings, I test in development mode in localhost (with ng serve, npm run dev:ssr or npm run build:ssr + npm run serve:ssr, and the result is awesome:

But when you develop in firebase (with ng deploy command), this is the result:

I am not sure if the problem is in the way i configure my app.module.ts, becouse when I remove AngularFireModule and AngularFirestoreModule dependences, and deploy, the SSR function is deployed OK, but... firestore feature doesn't work (of course).

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule,
    // AngularFireModule.initializeApp(environment.firebase),
    // AngularFirestoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Anybody can help me? Is possible to mix Angular + SSR as Cloud Function + PWA + Firebase Hosting?

have you tried using ` $ firebase emulators:start ` to do a local test of the hosting and functions? it might reveal some things you can't see from a full deploy. — Ben Bradshaw
Are there any logs server side logs? You can check them out by following this instruction. — Rafael Lemos
Thank you: @BenBradshaw and Rafael. I found the problem (but the logs didn't help my this way). It was needed: 1: Use node 12 LTS. 2: Install globalThis polyfill. After that, I could deploy — Sangarllo

Samudra Gogoi Samudra Gogoi · Accepted Answer · 2021-02-18T10:02:40

you can try changing the functions nodejs version to 12 edit this in the angular.json

    "deploy": {
      "builder": "@angular/fire:deploy",
      "options": {
        "functionsNodeVersion": 12,
        "functionsRuntimeOptions": {
          "memory": "1GB",
          "timeoutSeconds": 540
        },
        "ssr": true
      }
    }

Problem with Angular 11 Universal SSR + PWA. Deploying SSR as Cloud Function Functions did not deploy properly

1 Answers