Angular 2 Universal - 服务器端渲染

Question

我正在阅读关于使用node进行Angular 2服务器端渲染的内容。

但是我找不到示例或解释该如何操作。 我需要从服务器上用Angular渲染一些页面，有什么建议吗？

- Pablo

---

我从最近的一篇博客文章中了解到，Angular 2.x服务器端渲染是最后一个编码的模块之一，目前仍处于相当开发阶段。 - Daniel Nalbach

你可以检查该项目的代码库 https://github.com/angular/universal - Eric Martinez

Answer 1

看看这个入门套件：https://github.com/alexpods/angular2-universal-starter。它包含有服务器端渲染、Web Worker支持（整个angular2应用程序在Web Worker中运行）、懒加载（使用Webpack的代码分割）和许多其他功能。希望它能对您有所帮助。

披露：我是它的作者。

- alexpods

---

你的代码是否能够生成包含多个子组件的父组件的静态HTML页面？因为我尝试使用通用启动套件实现这一点，但没有成功。 - Bhushan Gadekar

@BhushanGadekar 当然可以。我的启动器可以生成带有任意数量子组件的静态HTML。 - alexpods

静态HTML生成并保存在哪里？ - Bhushan Gadekar

很好，我正在寻找这样的东西！ - maxime1992

@alexpods，你能告诉我在那段代码中是否支持jade/pug模板和stylus吗？我尝试使用require('main.styl')（并在webpack中添加正确的加载器）代替内联CSS来添加它们，但是我遇到了错误。 - Edmar Miyake

有没有升级起始应用程序到ng4的计划？ 官方文档太糟糕了！ - harshes53

Answer 2

这是 Angular Universal 的创建者在他们的演讲中使用的示例，它是一个可工作的存储库 -> https://github.com/angular/universal-starter/tree/angular-connect

这是该演讲 - 全栈 Angular 2

- Angular University

Answer 3

请看这里：https://universal.angular.io/ 这是官方文档和网站的“一些”内容。虽然 API 文档在代码中，但可参考以下链接以获得快速参考：https://universal.angular.io/api/universal/index.html#typedoc-main-index, https://universal.angular.io/api/preboot/globals.html。此外，还有一篇很好的第三方概述和设置文档，请看https://mickaelkerjeanblog.wordpress.com/2016/05/02/angular-universal/。

- Corey S.

Answer 4

这里有另一个示例仓库，位于https://github.com/ng-seed/universal，展示了在单个项目中同时使用Universal和精简版Angular。

该应用程序使用Angular 4.0.0提供的platform-server，并且它可能是一个很好的入门/种子项目，直到Angular提供关于使用platform-server的文档为止。

此外，它涵盖了angular2-webpack-starter的大部分功能，由AngularClass提供，例如异步/延迟路由、SCSS编译（内联和外部）、开发/生产模式、通过@ngtools/webpack进行AoT编译、测试、TsLint/Codelyzer、@types，以及可能还有更多。

披露：我也是作者 :)

- Burak Tasci

Answer 5

Angular 服务器端渲染步骤，按照以下注释运行：

第一步：->ng add @ng-toolkit/universal

第二步：->npm install

第三步：->npm run build:prod

第四步：->ng build --prod

第五步：->npm run server

第六步：-> 运行 cmd 并输入命令 ->curl http://localhost:4000

我的服务器端 Angular 应用程序 https://exampreparation.study

- Rokive

Answer 6

我发现这篇文章是在2018年7月搜索到的，现在我们已经使用Angular 6，并且有一个很好的教程here可以教你如何与Firebase一起使用它。

Angular文档在这里： https://angular.io/guide/universal。

你需要一个app.server.module，它从@angular/platform-server导入ServerModule和你的常规应用程序模块：

imports: [
  ServerModule,
  AppModule
],

在您的普通AppModule中，当您导入BrowserModule时，调用withServerTransition。

BrowserModule.withServerTransition({ appId: APP_ID })

您需要一个单独的主要模块来进行服务器端渲染，该模块仅导出您的服务器模块：

export { AppServerModule } from './app/app.server.module';

运行 express 服务器的相关部分如下：

const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist/server/main');

const index = require('fs')
  .readFileSync(path.resolve(__dirname, './dist/browser/index.html'), 'utf8')
  .toString();

let app = express();

app.get('**', function(req, res) {
  renderModuleFactory(AppServerModuleNgFactory, {
    url: req.path,
    document: index
  }).then(html => res.status(200).send(html));
});

- Jason Goemaat

Answer 7

有两种服务器端渲染方式

动态SSR（服务器端渲染）和静态预渲染

动态SSR是指当访问一个路由时，会启动一个实时的Node服务器，动态生成并序列化应用程序，将该字符串返回给浏览器。请记住，您不能将其放在AWS S3或nginx或apache httpd中，您需要在某个地方运行一个节点服务器。

静态预渲染是指我们想要预渲染一组路由，并创建静态文件（例如：index.html、about-us.html等），然后使用我们选择的服务器来稍后提供这些文件。您可以像普通的Angular应用程序一样使用AWS S3或nginx或apache httpd部署它。

那么我们如何知道应该选择哪种方式以及何时选择？

预渲染通常会为您提供更好的性能，因为我们不必等待服务器访问应用程序中所有必要的API，并且不必“序列化”任何内容，它已经输出了每个路由文件的序列化HTML。 以下是我们在考虑采取哪种路线之前与客户一起考虑的问题的良好列表。

何时使用静态预渲染：

• 你的应用程序本身相当静态。 （或者至少是你试图预渲染的路由） 例如：主页|关于我们|联系我们

• 您网站非常动态的部分（以及那些在登录/授权屏障后面的部分）可以指向正常的客户端呈现（CSR）版本的应用程序，Angular可以正常引导自己。

• 您的应用程序不经常更新。 每当需要在静态路由上进行一些更改时，您只需再次运行构建脚本并重新发布包含所有预渲染文件的/dist文件夹即可。

何时使用动态SSR：

• 您的应用程序（以及您需要SSR的路由）非常动态
• 您有一个“热门产品”|“实时数据”|等列表，您需要为每个服务器端呈现正确地填充。
• 您的应用程序结构基于JSON文件或CMS进行呈现，任何内容都可能在任何时刻更改。

通常大多数应用程序都需要静态预渲染（因为任何在身份验证墙后面的路由都不会从利用SSR中获得太多/任何好处，因为其中一个主要目的是SEO收益和提高感知性能。 请记住，在SSR期间，您始终可以使应用程序的某些方面不进行渲染，并在CSR期间填充这些动态部分！

Reference https://medium.com/@MarkPieszak/angular-universal-server-side-rendering-deep-dive-dc442a6be7b7

如何进行（截至2019年12月）

对于动态SSR，只需按照https://angular.io/guide/universal的步骤进行即可。

对于静态预渲染：

https://dev59.com/S1QJ5IYBdhLWcg3wg2T4#53725674

https://github.com/angular/angular/issues/23024

- so-random-dude