Angular 11 Universal + PWA doesn't work deploying SSR as Firebase Function

[Sangarllo]

Version info

Angular: 11.1 Firebase: "^7.0 || ^8.0" AngularFire: "^6.1.4" Node: 14.0.0

How to reproduce these conditions

Repo in GitHub. Issue in StackOverflow.

Steps to set up and reproduce

1. ng new ng-sample-ssr-pwa
2. ng add @nguniversal/express-engine
3. ng add @angular/pwa
4. ng add @angular/fire and develop app.component.ts and app.module.ts following Getting Started with AngularFire instructions.

My app.module file:

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' }),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Debug output

In development mode (in localhost) everything is fine:

npm run dev:ssr

or

npm run build:ssr && npm run serve:ssr

Expected behavior

ng deploy should deploy PWA app in firebase-hosting, and SSR as firebase-function

Actual behavior

ng deploy retrieves 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

Extra info

• When I remove AngularFireModule.initializeApp(environment.firebase) from app.module, features as Firestore doesn't work (of course), but ng deploy works fine and SSR is deployed as firebase function

[akilah007]

Update angular.json file "deploy": { "builder": "@angular/fire:deploy", "options": { "ssr": true, "functionsNodeVersion": 12 } }

[Sangarllo]

Thank you @akilah007. Your configuration helped to show my SSR function in firebase as Node 12, but i got the solution with this steps:

1. Install node 12 (and use) in my computer
2. Add globalThis pollyfil to my project.

[Sangarllo]

Solved with these steps:

1. Install (and use) node 12, as needed by firebase.
2. Add globalThis pollyfil to my project.