如何在Angular Universal项目中添加服务器渲染

Question

请帮助我了解如何在Angular Universal中使用服务器渲染。

我做了什么。我访问了Angular Universal官方网站。设置Node.js.下载推荐项目Angular 2 Webpack Starter。我在Mac上工作，所以使用“> sudo npm install”来安装node_modules。按照建议添加server.js.运行“> node server.js” - 但它不起作用。

如果我运行“> npm start”服务器在localhost：3000上启动 - 但似乎没有服务器渲染。如果我查看HTML页面，只有Angular的index.html。

如何在项目中添加服务器渲染功能？

非常感谢。

Answer 1

简单的方法是链接的克隆源代码和阅读如何运行项目github angular universal的文档

scotch.io

Answer 2

同时，你可以看看这个example app（Angular 4.0.0，Universal support，Webpack，以及更多）https://github.com/ng-seed/universal

肯定会给你或多或少的关于如何让它运行的想法。

Answer 3

从Angular 7开始，您可以运行此CLI命令

ng add @nguniversal/express-engine --clientProject yourprojectname

此命令执行所有工作，并使进行Angular Universal所需的所有文件和文件更改。

然后构建应用程序，

npm run build:ssr

然后使用此命令运行服务器（默认端口为4000）

npm run serve:ssr

现在你的Angular 7项目正在使用Angular Universal

至于Angular 6，您可以使用本指南在Universal中创建网站

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

与运行上述命令相比，链接的wiki实际上是手动编写所有内容。

或者如上所述，Kirill您也可以下载一个启动项目。

Answer 4

我找到了解决方案。我在github.com/angular/universal-starter下载了一个很好的启动项目，支持服务器渲染。