Angular 2 Universal - 服务器端渲染

I was reading about Angular 2 Server side rendering with node.

我正在阅读有关节点的Angular 2 Server侧渲染的内容。

But I cannot find an example or explain how should I do that. I need to render some pages with angular from server, any advice?

但我找不到一个例子或解释我该怎么做。我需要从服务器渲染一些带有角度的页面，有什么建议吗？

5 个解决方案

#1

This is the example the creators of angular-universal used in their talk, its a working repo -> https://github.com/angular/universal-starter/tree/angular-connect

这是角度通用的创造者在他们的谈话中使用的例子，它是一个有效的回购 - > https://github.com/angular/universal-starter/tree/angular-connect

And this is the talk - Full Stack Angular 2

这就是谈话 - Full Stack Angular 2

#2

Well, look at this starter kit https://github.com/alexpods/angular2-universal-starter. It has server side rendering, web workers support (entire angular2 application is running in a web worker) , lazy loading (using webpack's code splitting) and many other things. I hope it will help you.

那么，看看这个入门套件https://github.com/alexpods/angular2-universal-starter。它具有服务器端呈现，Web工作者支持（整个angular2应用程序在Web worker中运行），延迟加载（使用webpack的代码拆分）和许多其他东西。我希望它会对你有所帮助。

Disclosure: I'm its author.

披露：我是它的作者。

#3

Take a look here: https://universal.angular.io/

看看这里：https：//universal.angular.io/

Looks like 'some' of the official documentation/site is now up. API docs are in the code but for quick reference see these links:

看起来官方文档/网站的“部分”现在已经启动了。 API文档在代码中，但为了快速参考，请参阅以下链接：

https://universal.angular.io/api/universal/index.html#typedoc-main-index https://universal.angular.io/api/preboot/globals.html

Nice third party overview and setup doc: https://mickaelkerjeanblog.wordpress.com/2016/05/02/angular-universal/

不错的第三方概述和设置文档：https：//mickaelkerjeanblog.wordpress.com/2016/05/02/angular-universal/

#4

There's another example repo at https://github.com/ng-seed/universal showcasing both Universal and lean Angular on a single project.

在https://github.com/ng-seed/universal上还有另一个示例回购，展示了单个项目中的Universal和lean Angular。

This application uses platform-server delivered with Angular 4.0.0, and it could be a good starter/seed project until Angular provides some documentation about the use of platform-server.

此应用程序使用随Angular 4.0.0提供的平台服务器，它可能是一个很好的入门/种子项目，直到Angular提供有关平台服务器使用的一些文档。

Furthermore, it covers most of the features of angular2-webpack-starter by AngularClass such as async/lazy routes, SCSS compilation (both inline and external), dev/prod modes, AoT compilation via @ngtools/webpack, tests, TsLint/Codelyzer, @types and maybe more.

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

Disclosure: I'm the author too :)

披露：我也是作者:)

#5

I found this searching in July 2018 and thought it has probably changed since then. Now we're on Angular 6 and there's a good tutorial here for using it with firebase.

我在2018年7月找到了这个搜索，并认为它从那时起可能已经改变了。现在我们在Angular 6上，这里有一个很好的教程，可以将它与firebase一起使用。

The angular docs are here: https://angular.io/guide/universal.

角度文档在这里：https：//angular.io/guide/universal。

You have an app.server.module that imports ServerModule from @angular/platform-server and your regular app module:

你有一个app.server.module，它从@ angular / platform-server和你的常规app模块导入ServerModule：

imports: [
  ServerModule,
  AppModule
],

And in your normal AppModule you call withServerTransition when you import the BrowserModule.

在您正常的AppModule中，在导入BrowserModule时调用withServerTransition。

BrowserModule.withServerTransition({ appId: APP_ID })

You have a separate main for server side rendering that just exports your server module:

您有一个单独的主服务器端呈现，只是导出您的服务器模块：

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

The relevant part that runs the express server looks like this:

运行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));
});

#1