Angular Universal error - app.auth is not a function

Question

Tech Stack: AngularFire2, Firebase, Firebase Functions, Angular 7,

I get an error when I deploy the website into Firebase Functions, although it works properly locally.

Angular Cli and Angular Universal.

AngularFire2 version: "@angular/fire": "^5.1.2"
Firebase version:    "firebase": "^5.9.3"

I have debugged this and it seems to be an issue with AngularFire2.

Things I've tried:

I have upgraded the library and downgraded it to see if that fixes it, but no luck.

Also, tried uninstall npm packages and removing the package lock but no luck either.

This is the stack trace error on firebase console (functions):

ERROR TypeError: app.auth is not a function
    at /user_code/dist/server.js:152999:24
    at ZoneDelegate.invoke (/user_code/dist/server.js:555:26)
    at Zone.run (/user_code/dist/server.js:314:43)
    at NgZone.runOutsideAngular (/user_code/dist/server.js:20244:28)
    at new AngularFireAuth (/user_code/dist/server.js:152997:26)
    at _createClass (/user_code/dist/server.js:24259:20)
    at _createProviderInstance (/user_code/dist/server.js:24221:26)
    at resolveNgModuleDep (/user_code/dist/server.js:24185:21)
    at _createClass (/user_code/dist/server.js:24251:29)
    at _createProviderInstance (/user_code/dist/server.js:24221:26)

This is my current webpack.prerender.config.js:

const path = require('path');
const webpack = require('webpack');

const regex = /firebase\/(app|firestore)/;

module.exports = {
  mode: 'none',
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts'
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  optimization: {
    minimize: false
  },
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    libraryTarget: 'umd',
    library: 'app'
  },
   // this makes sure we include node_modules and other 3rd party libraries
  externals: [function(context, request, callback) {

    // exclude firebase products from being bundled, so they will be loaded using require() at runtime.
    if(regex.test(request)) {
      return callback(null, 'commonjs ' + request);
    }
    callback();
  }],
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

Answer 1

Reason for this issue:

"engines": { "node": "8" },

was missing from the package.json file in the functions folder. It seems that with this missing, causes the html not to fully render with ssr.