Технический стек: 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'),
{}
)
]
};
Можешь объяснить, как бы я это сделал @FelipeGonçalvesMarques
Вы бы сделали две реализации FirebaseService, одну с использованием AngularFire, а другую с использованием HttpClient. Оба должны получать один и тот же объект конфигурации и иметь одинаковый интерфейс. Тогда у вас будет прокси или строитель, который получит флаг, указывающий, находитесь ли вы на стороне сервера или на стороне клиента. В соответствии с флагом вы должны выбрать, какую реализацию FirebaseService использовать. Я не уверен, но я считаю, что вы можете использовать Angular Dependency Injection, чтобы использовать функцию для принятия решения о реализации для внедрения.
@FelipeGonçalvesMarques, у вас есть для меня пример stackblitz?
Я могу попытаться собрать один, но я смогу сделать это только в конце недели. И опять же, я не уверен, что это является причиной вашей проблемы. Я заглянул в github AngularFire2, и, согласно их README, они поддерживают рендеринг на стороне сервера. Так что я не думаю, что это проблема.
Интересно, это как-то связано с моей конфигурацией веб-пакета: github.com/angular/angularfire2/issues/1707
@FelipeGonçalvesMarques Я добавил конфигурацию своего веб-пакета выше. Можете ли вы взглянуть и посмотреть, связана ли ошибка с этой конфигурацией, пожалуйста?
Почему ты делаешь это? if (regex.test(request)) { return callback(null, 'commonjs ' + request); }
Без понятия, я взял его из другой конфигурации веб-пакета, мне его удалить?
да, я дам правильный ответ, секундочку
Должен ли я попробовать эту конфигурацию веб-пакета: raw.githubusercontent.com/codediodeio/angular-firestarter/…
Давайте продолжить обсуждение в чате.
Попробуйте просто удалить свойство externals
из конфигурации webpack.
Если я удаляю внешние, я получаю эту ошибку: Произошла ошибка при анализе триггеров вашей функции. TypeError: невозможно прочитать свойство 'stringify' неопределенного
Давайте поговорим в чате SO, таким образом, мы не будем расширять обсуждение в комментариях: чат.stackoverflow.com/rooms/191656/…
Чего не хватало в функциях package.json?
"двигатели": { "узел": "8" },
@FelipeGonçalvesMarques У меня есть еще одна проблема с ssr с рендерингом, я задал новый вопрос: stackoverflow.com/questions/55634099/…
Причина этой проблемы:
"двигатели": { "узел": "8" },
отсутствовал в файле package.json в папке functions. Кажется, что при отсутствии этого html не полностью отображается с помощью ssr.
Прошло много времени с тех пор, как я работал с AngularFire (2017). Но я вспомнил, что мне нужно было инкапсулировать его с помощью прокси-сервера, который переключался бы на Firebase REST API при выполнении рендеринга на стороне сервера. Надеюсь это поможет.