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

Question

我按照此处的Angular文档将服务器端渲染添加到Angular项目中。

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

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. 在您的中添加prerender条目webpack.server.config.js：

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

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

   "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. 编辑您的线17 prerender.ts通过

   const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
   

8. 安装软件包http-server来提供预渲染版本：

   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