Firebase Cloud Function for Angular SSR

angular.json.md

{
-  "outputPath": "dist/piggybank", 
+  "outputPath": "functions/dist/piggybank",
-  "outputPath": "dist/piggybank-server",
+  "outputPath:": "functions/dist/piggybank-server",
}

package.json.md

{
  dependencies: {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.1.0",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/platform-server": "^6.0.3",
    "@angular/pwa": "^0.6.5",
    "@angular/router": "^6.0.3",
    "@angular/service-worker": "^6.0.3",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "angularfire2": "^5.0.0-rc.10",
    "core-js": "^2.5.4",
    "express": "^4.16.3",
    "firebase": "^5.0.4",
    "firebase-admin": "^5.12.1",
    "firebase-functions": "^1.0.3",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.2.0",
    "zone.js": "^0.8.26"
  }
}

ssr.function.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {enableProdMode} from '@angular/core';
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// Import module map for lazy loading
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

import * as express from 'express';
import {join} from 'path';
import * as functions from 'firebase-functions';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('../dist/piggybank-server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'piggybank'));

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'piggybank'), {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

export const ssr = functions.https.onRequest(app);

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "outDir": "lib",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "compileOnSave": true,
  "include": [
    "src"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

npm install --save @angular/animations @angular/cdk @angular/common @angular/compiler @angular/core @angular/forms @angular/http @angular/material @angular/platform-browser @angular/platform-browser-dynamic @angular/platform-server @angular/pwa @angular/router @angular/service-worker @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader angularfire2 core-js express firebase firebase-admin firebase-functions reflect-metadata rxjs rxjs-compat zone.js