Проблема : Angular Universal (ssr) не работает для страниц, которые используют базу данных Firebase Firestore.
Tech : Angular версии 7, Angular Cli, Angular Universal, хостинг Firebase, функции Firebase, база данных Firebase Firestore.
Мой серверный рендеринг отлично работает на всех страницах.
Проблема возникает при просмотре этой страницы: [https://behired -staging.firebaseapp.com / job-board] [1] данные не отображаются.
Загрузка данных также не занимает много времени.
Я вижу html, но не ul li для списка 20 рабочих мест на дисплее.
Текущий статус:
После дальнейших исследований кажется, что пожарный магазин отлично работает с angularFire. Причина, по которой он не работает для меня, связана с использованием пожарного депо и гео-магазина. Geofirestore, похоже, мешает работе ssr
Это то, что мне нужно установить в моей конфигурации webpack:
const regex = /firebase\/(app|firestore)/;
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'none',
entry: {
server: './server.ts'
},
target: 'node',
resolve: { extensions: ['.ts', '.js'] },
optimization: {
minimize: false
},
externals: [function(context, request, callback) {
if(regex.test(request) && !/.*angularfire.*/i.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}],
output: {
path: path.join(__dirname, 'dist'),
library: 'app',
libraryTarget: 'umd',
filename: '[name].js',
},
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' },
{
test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
parser: { system: true },
},
]
},
plugins: [
new webpack.ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'),
{}
),
new webpack.ContextReplacementPlugin(
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};
Это мои функции package.json:
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase serve --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular-devkit/build-angular": "~0.13.0",
"@angular/animations": "~7.2.0",
"@angular/cdk": "^7.3.3",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/fire": "^5.1.0",
"@angular/forms": "~7.2.0",
"@angular/http": "~7.2.0",
"@angular/material": "^7.3.3",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/platform-server": "~7.2.0",
"@angular/pwa": "^0.13.6",
"@angular/router": "~7.2.0",
"@angular/service-worker": "^7.2.11",
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@firebase/app": "^0.3.14",
"@hackages/ngxerrors": "^6.0.3",
"@kolkov/angular-editor": "^0.13.1",
"@nguniversal/express-engine": "^7.1.1",
"@nguniversal/module-map-ngfactory-loader": "0.0.0",
"@ngx-meta/core": "^6.0.0",
"@ngx-pwa/offline": "^6.1.0",
"@sentry/browser": "^4.4.2",
"angular-google-map": "0.0.2",
"animate.css": "^3.7.0",
"aos": "^2.3.4",
"basscss": "7.1.1",
"basscss-sass": "^4.0.0",
"chart.js": "^2.7.3",
"core-js": "^2.5.4",
"express": "^4.15.2",
"firebase": "^5.5.6",
"firebase-admin": "~7.0.0",
"firebase-functions": "^2.2.0",
"fs-extra": "^7.0.1",
"geofirestore": "^3.2.1",
"http-server": "^0.11.1",
"latlon-geohash": "^1.1.0",
"lodash": "^4.17.10",
"lozad": "^1.9.0",
"moment": "^2.22.2",
"ng2-truncate": "^1.3.17",
"ngx-google-places-autocomplete": "^2.0.1",
"ngx-prevent-double-submission": "^0.1.0",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.3.3",
"sass-lint": "^1.12.1",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"engines": {
"node": "8"
},
"private": true
}
Это мой файл tsconfig.prerender.json:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/agm",
"types": [],
"module": "commonjs"
},
"include": [
"node_modules/@angular/fire",
"node_modules/firebase",
"node_modules/geofirestore",
"node_modules/@agm/core",
"node_modules/@hackages/ngxerrors",
"node_modules/ngx-google-places-autocomplete",
"node_modules/ngx-prevent-double-submission",
"node_modules/@ngx-meta/core"
]
}