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

【问题标题】：How to add server rendering in Angular Universal project如何在 Angular Universal 项目中添加服务器渲染
【发布时间】：2017-02-18 22:49:37
【问题描述】：

请帮助我了解如何在 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。

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

非常感谢。

【问题讨论】：

我在github.com/angular/universal-starter找到了一个不错的开始项目

标签： angular-universal server-rendering

【解决方案1】：

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

scotch.io

【讨论】：

【解决方案2】：

同时，您可以查看example app（Angular 4.0.0、通用支持、Webpack 等）https://github.com/ng-seed/universal

肯定会或多或少地让您了解如何运行它。

【讨论】：

【解决方案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 上面提到的，您也可以只下载一个起始项目。

【讨论】：

【解决方案4】：

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

【讨论】：

项目已弃用