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

Question

我按照 Angular 文档 here.

向我的 Angular 项目添加了服务器端渲染

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

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

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

这很奇怪，因为我在 universal-starter.

上找到了这些命令

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

要重现，运行在终端：

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模块，app.server.module.ts
在 server.ts

prerender.ts

static.paths.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。 ecstatic 在 0.11.0 版本中存在一个错误。如果您遇到问题，请阅读讨论帖 here 并查看一些解决方案。如果您遇到此问题并且不想升级 http-server，请降级您的 ecstatic 版本，或者明确导航到 index.html 以呈现您的页面。

我很高兴能够启动 SSR 并运行ning，但是运行进入这个问题并且它确实耗费了一些时间。希望对您有所帮助。

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

Add static pre-rendering to ng add @nguniversal/express-engine

angular-universal

angular