问题:Angular Universal(ssr)不适用于使用Firebase Firestore数据库的页面。
技术:Angular版本7,Angular Cli,Angular Universal,Firebase托管,Firebase功能,Firebase Firestore数据库。
我的服务器端渲染在所有页面上均正常运行。 问题是当我查看此页面时:[https://behired-staging.firebaseapp.com/job-board][1]它不显示数据。
数据加载时间不会太长。 我看到的是html,但在显示的20个作业列表中却没有。
当前状态:
经过进一步调查,似乎firestore与angularFire可以正常工作。它对我不起作用的原因是由于使用了Firestore和Geofirestore。 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"
]
}