将静态预渲染添加到ng-Add@nguniversal/express引擎中

Question

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

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

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

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

这很奇怪，因为我在通用启动器上发现了这些命令。

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

要复制，请在终端中运行：

• 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. 在server.ts旁边的项目根级别创建文件prerender.ts和static.paths.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:中添加预提交条目

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

6. 在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. 通过编辑prerender.ts的第17行

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

8. 安装程序包http服务器以提供预发布版本：

   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
   

Answer 2

[编辑]降级到版本0.9.0实际上似乎是最好的选择。

如果使用的是0.11.0版本，您可能会遇到http服务器错误。0.11.0版本上有一个错误。如果你有问题，请阅读这里的帖子，并查看一些解决方案。如果您有这个问题并且不想升级http服务器，请降级您的狂喜版本，或者显式导航到index.html以呈现您的页面。

我很兴奋能让SSR启动并运行，但遇到了这个问题，它真的消耗了一些时间。我希望这能有所帮助。