Angular Universal 错误 - app.auth 不是函数答案

【问题标题】：Angular Universal error - app.auth is not a functionAngular Universal 错误 - app.auth 不是函数
【发布时间】：2019-04-09 21:16:15
【问题描述】：

技术栈： AngularFire2、Firebase、Firebase Functions、Angular 7、

将网站部署到 Firebase Functions 时出现错误，尽管它在本地可以正常运行。

Angular Cli 和 Angular Universal。

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

我已经调试过了，这似乎是 AngularFire2 的问题。

我尝试过的事情：

我已经升级了库并降级了它，看看是否可以修复它，但没有运气。

另外，尝试卸载 npm 包并删除包锁，但也没有运气。

这是 firebase 控制台（函数）上的堆栈跟踪错误：

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)

这是我当前的 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'),
      {}
    )
  ]
};

【问题讨论】：

自从我使用 AngularFire (2017) 以来已经很长时间了。但我记得在进行服务器端渲染时必须使用一个代理来封装它，该代理会切换到 Firebase REST API。希望这会有所帮助。
你能解释一下我会怎么做吗@FelipeGonçalvesMarques
您将执行 FirebaseService 的两种实现，一种使用 AngularFire，另一种使用 HttpClient。两者都应该接收相同的配置对象，并且应该具有完全相同的接口。然后，您将拥有一个代理或生成器，它会收到一个标志，指示您是在服务器端还是客户端。根据标志，您将选择要使用的 FirebaseService 实现。我不确定，但我相信您可以使用 Angular 依赖注入来使用函数来决定注入的实现。
我可以尝试将一个放在一起，但我只能在本周末完成。再说一次，我不确定这是你问题的原因。我查看了 AngularFire2 github，根据他们的 README，他们支持服务器端渲染。所以，我不认为这是问题所在。
函数 package.json 中缺少什么？

标签： angular firebase google-cloud-functions angularfire2 angular-universal

【解决方案1】：

出现此问题的原因：

“引擎”：{ “节点”：“8” },

函数文件夹中的 package.json 文件中缺少。似乎缺少这个，会导致 html 无法使用 ssr 完全呈现。

【讨论】：