node.js - Angular 9 SSR 空白页面呈现超时错误
问题描述
从过去 3 天开始,我一直在努力在具有云功能托管的 angular 9 应用程序中实现 SSR,当我在本地服务或部署在 firebase 托管时获取空白页面。
这是我的云功能代码:
const region = "europe-west3";
const runtimeOpts = {
timeoutSeconds: 120,
memory: "2GB"
};
const functions = require("firebase-functions");
const universal = require(`${process.cwd()}/dist/demossr/server/main`).app;
export const ssr = functions.runWith(runtimeOpts).https.onRequest(universal());
这是我的 server.ts 代码
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
// The Express app is exported so that it can be used by serverless Functions.
export function app() {
const server = express();
const distFolder = join(process.cwd(), 'dist/demossr/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('/', express.static(distFolder, {
maxAge: '1y',
index: false
}));
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }
});
return server;
}
function run() {
const port = process.env.PORT || 4000;
// Start up the Node server
const server = app();
// server.listen(port, () => {
// console.log(`Node Express server listening on http://localhost:${port}`);
// });
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
我不知道我在哪里做错了,迫切需要解决这个问题。
解决方案
I was following Jeff Delaney's guide to angular universal over https://fireship.io/lessons/angular-universal-firebase/ but was having timeouts when it came to cloud function.
I'm new to nodejs, I was able to get it working when i had taken out the app function in the generated index.ts to something similar to the guide.
index.ts (in functions)
import * as functions from 'firebase-functions';
const universal = require(`${process.cwd()}/dist/demoapp/server/main`).app;
export const ssr = functions.https.onRequest(universal);
server.ts
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import {join} from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
// Express server
export const app = express();
export const server = app;
const DIST_FOLDER = join(process.cwd(), 'dist/demoapp/browser');
const indexHtml = existsSync(join(DIST_FOLDER, 'index.original.html')) ? 'index.original.html' : 'index';
app.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
app.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
推荐阅读
- c# - 如何在不每次分配新数组的情况下将字符串编码到现有字节缓冲区中?
- php - 如何使用wordpress中的插件过滤主题中加载的帖子?
- project-reactor - Project Reactor:实现有条件地映射输入Mono
- x11 - QStandardPaths:未设置 XDG_RUNTIME_DIR,默认为 '/tmp/runtime-aadithyasb'
- firebase - Firebase 函数/GCP 函数:HTTPS 到外部托管 API 失败并出现 HPE_HEADER_OVERFLOW
- android - Flutter:方法“call”在null上被调用 - 错误重复多次
- javascript - 将 JavaScript 添加到 StenclJS 监听事件
- c# - 工厂的依赖注入,参数在创建时解析
- excel - VBA excel宏仅复制文件的值
- laravel - Laravel-websoket - 如果后端在另一个端口上,则不广播