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的步骤：

ng add @nguniversal/express-engine --clientProject [your project name]初始化服务器端应用程序模块app.server.module.ts
在项目的根目录下prerender.ts

static.paths.ts

server.ts

将https://github.com/angular/universal-starter/blob/master/prerender.ts的内容复制到prerender.ts文件中
按照示例https://github.com/angular/universal-starter/blob/master/static.paths.ts

static.paths.ts

在webpack.server.config.js中添加预渲染条目：

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

在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"
  }

通过

编辑prerender.ts的第17行

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

安装软件包 http-server 来提供预渲染版本：
```
npm install http-server --save-dev
```

您现在可以出发了！

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上有一个狂喜的错误。如果您遇到问题，请阅读线程here并查看一些解决方案。如果遇到此问题并且不想升级http-server，请降级您的ecstatic版本，或者明确导航到index.html来呈现页面。

我非常高兴能够启动并运行SSR，但是遇到了这个问题，确实花了一些时间。我希望这会有所帮助。

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

2 个答案: