Универсальная ошибка Angular - app.auth не является функцией

Технический стек: AngularFire2, Firebase, Функции Firebase, Angular 7,

Я получаю сообщение об ошибке при развертывании веб-сайта в функциях Firebase, хотя локально он работает правильно.

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 при выполнении рендеринга на стороне сервера. Надеюсь это поможет.

Felipe Gonçalves Marques 09.04.2019 23:20

Можешь объяснить, как бы я это сделал @FelipeGonçalvesMarques

AngularM 10.04.2019 00:02

Вы бы сделали две реализации FirebaseService, одну с использованием AngularFire, а другую с использованием HttpClient. Оба должны получать один и тот же объект конфигурации и иметь одинаковый интерфейс. Тогда у вас будет прокси или строитель, который получит флаг, указывающий, находитесь ли вы на стороне сервера или на стороне клиента. В соответствии с флагом вы должны выбрать, какую реализацию FirebaseService использовать. Я не уверен, но я считаю, что вы можете использовать Angular Dependency Injection, чтобы использовать функцию для принятия решения о реализации для внедрения.

Felipe Gonçalves Marques 10.04.2019 09:43

@FelipeGonçalvesMarques, у вас есть для меня пример stackblitz?

AngularM 10.04.2019 13:43

Я могу попытаться собрать один, но я смогу сделать это только в конце недели. И опять же, я не уверен, что это является причиной вашей проблемы. Я заглянул в github AngularFire2, и, согласно их README, они поддерживают рендеринг на стороне сервера. Так что я не думаю, что это проблема.

Felipe Gonçalves Marques 10.04.2019 14:27

Интересно, это как-то связано с моей конфигурацией веб-пакета: github.com/angular/angularfire2/issues/1707

AngularM 11.04.2019 14:20

@FelipeGonçalvesMarques Я добавил конфигурацию своего веб-пакета выше. Можете ли вы взглянуть и посмотреть, связана ли ошибка с этой конфигурацией, пожалуйста?

AngularM 11.04.2019 14:21

Почему ты делаешь это? if (regex.test(request)) { return callback(null, 'commonjs ' + request); }

Felipe Gonçalves Marques 11.04.2019 14:27

Без понятия, я взял его из другой конфигурации веб-пакета, мне его удалить?

AngularM 11.04.2019 14:29

да, я дам правильный ответ, секундочку

Felipe Gonçalves Marques 11.04.2019 14:30

Должен ли я попробовать эту конфигурацию веб-пакета: raw.githubusercontent.com/codediodeio/angular-firestarter/…

AngularM 11.04.2019 14:30

Давайте продолжить обсуждение в чате.

Felipe Gonçalves Marques 11.04.2019 14:33

Попробуйте просто удалить свойство externals из конфигурации webpack.

Felipe Gonçalves Marques 11.04.2019 14:34

Если я удаляю внешние, я получаю эту ошибку: Произошла ошибка при анализе триггеров вашей функции. TypeError: невозможно прочитать свойство 'stringify' неопределенного

AngularM 11.04.2019 14:39

Давайте поговорим в чате SO, таким образом, мы не будем расширять обсуждение в комментариях: чат.stackoverflow.com/rooms/191656/…

Felipe Gonçalves Marques 11.04.2019 14:42

Чего не хватало в функциях package.json?

Felipe Gonçalves Marques 11.04.2019 15:42

"двигатели": { "узел": "8" },

AngularM 11.04.2019 15:43

@FelipeGonçalvesMarques У меня есть еще одна проблема с ssr с рендерингом, я задал новый вопрос: stackoverflow.com/questions/55634099/…

AngularM 11.04.2019 15:50
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
18
656
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Причина этой проблемы:

"двигатели": { "узел": "8" },

отсутствовал в файле package.json в папке functions. Кажется, что при отсутствии этого html не полностью отображается с помощью ssr.

Другие вопросы по теме