将静态预渲染添加到add @universal / express-engine

Question

我通过遵循Angular文档here将服务器端渲染添加到我的Angular项目中。

我发现使用CLI命令后运行静态预渲染npm run build:prerender和npm run serve:prerender的命令不在此处：

ng add @nguniversal/express-engine --clientProject [angular.projet]

我想知道Universal是否仍支持静态预渲染？生成的代码都是关于动态SSR的。

这很奇怪，因为我在universal-starter上发现了这些命令。

有人有这方面的信息吗？另外如何在角度项目中添加静态预渲染？

要重现，请在终端中运行：

• ng new foo开始一个新项目
• ng add @nguniversal/express-engine --clientProject foo增加了普遍性

感谢帮助。

Answer 1

我找到了一种手动添加静态预渲染的方法。

对于那些感兴趣的人，将静态预渲染手动添加到ng add @nguniversal/express-engine的所有步骤：

1. ng add @nguniversal/express-engine --clientProject [your project name]初始化服务器端应用程序模块app.server.module.ts
2. 在prerender.ts旁边的项目根级别创建文件static.paths.ts和server.ts
3. 在https://github.com/angular/universal-starter/blob/master/prerender.ts文件中复制prerender.ts的内容
4. 按照示例static.paths.ts在https://github.com/angular/universal-starter/blob/master/static.paths.ts中创建路线
5. 在webpack.server.config.js中添加prerender条目：

   module.exports = {
     mode: 'none',
     entry: {
       server: './server.ts',
       prerender: './prerender.ts'
     },

6. 在package.json中添加prerender脚本：

   "scripts": {
       ...
       "build:prerender": "npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender",
       "generate:prerender": "cd dist && node prerender",
       "serve:prerender": "cd dist/browser && http-server"
     }

7. 编辑你的prerender.ts第17行 const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
8. 安装包http-server以提供prerender构建： npm install http-server --save-dev
9. 你现在准备好了！

   npm run build:prerender && npm run serve:prerender
   
   
   Starting up http-server, serving ./
   Available on:
     http://127.0.0.1:8080
     http://192.168.0.10:8080
   Hit CTRL-C to stop the server