想象这样一个场景：您已经在您的 Web 项目上工作了几个月，这很可能是一个 Web 应用程序，更具体地说，是一个“单页应用程序”。 但是现在是时候将您的应用程序交付并发布给数百万用户和……搜索引擎了。 为了使您的应用程序成功，它必须被搜索引擎索引，即需要添加 SEO 支持！

我们可以把 [Angular Universal](https://medium.com/google-developer-experts/angular-universal-for-the-rest-of-us-922ca8bac84) 理解成：Universal is Angular for the Headless Web.

您不再需要浏览器容器（也称为 WebView）来运行 Angular。 由于它与 DOM 无关，因此 Angular 可以在任何有 JavaScript 运行时的地方运行，比如 Node.js.

![](https://img-blog.csdnimg.cn/img_convert/6b55b9d351c043c8ba3f9206f2244690.png)

此图说明了 Universal 在浏览器之外运行典型 Angular Web 应用程序的能力。 显然我们需要一个 JavaScript 运行时，这就是我们默认支持 Node.js（由 V8 引擎提供支持）的原因。 当然，现在也涌现出了越来越多的其他服务器端技术，如 PHP、Java、Python、Go……

有了 Angular Universal 之后，您的应用程序可以在浏览器之外解释——让我们以服务器为例——请求您的 SPA 的客户端将收到所请求路由/URL 的静态完全呈现页面。 此页面包含所有相关资源，即图像、样式表、字体……甚至是通过 Angular 服务传入的数据。

Universal 能够重新连接一些默认的 Angular provider 实现，以便它们可以在目标平台上工作。 当客户端收到渲染的页面时，它也会收到原始的 Angular 应用程序—— Angular Universal 使得应用程序在浏览器里看起来几乎是瞬间就完成了加载。 加载后，Angular 客户端应用会处理剩下的事情。

事实上，Universal 与 Preboot.js 库捆绑在一起，其唯一作用是确保两个状态同步。Preboot.js 在幕后所做的只是简单而智能地记录 Angular 引导程序之前发生的事件； 并在 Angular 完成加载后对这些事件进行重播。

由于 Angular 的渲染抽象，Universal 成为可能。 事实上，当您编写应用程序代码时，该逻辑会被 Angular 的编译器解析为 AST——我们在这里真正简化了事情。 然后 AST 被 Angular 的渲染层使用，它使用一个不依赖于 DOM 的抽象渲染器。 Angular 允许您使用不同的渲染器。 默认情况下，Angular 附带 DOMRenderer，因此您的应用程序可以在浏览器中呈现，这可能是 95% 的用例。

这就是 Universal 的用武之地。 Universal 带有一堆预渲染器，适用于所有主流技术和构建工具。

# Dependency Injection and Providers

Angular 的另一个亮点是它的 DI 系统。 事实上，Angular 是唯一实现这种设计模式的前端框架，它允许轻松完成如此多的伟大任务（比如控制反转）。 多亏了 DI，您可以例如在运行时交换两个不同的实现，这在测试中被大量使用。

在 Universal，我们利用这个 DI 系统为您提供许多特定于目标平台的服务。 对于 Node，我们提供了一个自定义的 ServerModule，它实现了 Node 的服务器特定 API，例如请求，而不是浏览器的 XHR。 Universal 还附带了一个特定于 Node 的自定义渲染器，当然，我们为您提供了一堆预渲染器——我们称之为——例如用于您的 Node 后端技术的 Express 渲染器或 Webpack 渲染器。 对于其他非 JavaScript 技术，例如 .NetCore 或 Java，您也应该期待其他预渲染器。

好消息是 Universal Application 与经典的 Angular 应用程序没有什么不同。 应用程序逻辑实际上保持不变。

![](https://img-blog.csdnimg.cn/img_convert/4448f6934360da8df5ed6c8f42a5d341.png)

只要有可能，在直接接触 DOM 之前请三思。 每次要与浏览器的 DOM 交互时，请确保使用 Angular Renderer 或渲染抽象。

下图是 Angular Universal Application Structure.

![](https://img-blog.csdnimg.cn/img_convert/779f115c21535c151c66609de193663c.png)

## browser.module.ts

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './index';
@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [ AppComponent ],
  imports: [
    BrowserModule.withServerTransition({appId: 'some-app-id'}),
    ...
  ]
})
export class AppBrowserModule {}
```

请注意，您需要使用 withServerTransition() 方法初始化 BrowserModule。 这将确保基于浏览器的应用程序将从服务器呈现的应用程序过渡。

# server.module.ts

该模块专用于您的服务器环境。 ServerModule 提供了一组来自 @angular/platform-server 包的 provider.

```typescript
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppComponent, AppBrowserModule } from './browser.module';
@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [ AppComponent ],
  imports: [
    ServerModule,
    AppBrowserModule,
    ...
  ]
})
export class AppServerModule {}
```

在 AppServerModule 中，您应该同时导入 ServerModule 和 AppBrowserModule，以便它们共享相同的 appId，即 AppBrowserModule 使用的 transition ID。

# client.ts

该文件负责在客户端引导您的应用程序。 这里没有什么新东西，只是通常的引导过程（在 AOT 模式下）：

```typescript
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './ngfactory/src/app.ngfactory';
import { enableProdMode } from '@angular/core';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
```

# server.ts

此文件确实特定于您的服务器/后端环境。 在这里，我们的目标是 Node.js，更准确地说是 Express 框架来处理所有客户端请求和渲染过程。 为此，我们正在使用和注册代表 Express 的 Angular Universal 渲染引擎的 ngExpressEngine（见下一段）：

```typescript
import { 
  platformServer, 
  renderModuleFactory
} from '@angular/platform-server';
import { 
  AppServerModuleNgFactory
} from './ngfactory/src/app.server.ngfactory';
import { enableProdMode } from '@angular/core';
import { AppServerModule } from './server.module';
import * as express from 'express';
import {ngExpressEngine} from './express-engine';

enableProdMode();

const app = express();

app.engine('html', ngExpressEngine({
  baseUrl: 'http://localhost:4200',
  bootstrap: [AppServerModuleNgFactory]
}));

app.set('view engine', 'html');
app.set('views', 'src')

app.get('/', (req, res) => {
  res.render('index', {req});
});

app.listen(8200,() => {
  console.log('listening...')
});
```

给 express 开发一个简单的渲染器：

```typescript
const fs = require('fs');
const path = require('path');
import {renderModuleFactory} from '@angular/platform-server';

export function ngExpressEngine(setupOptions){
  return function(filePath, options, callback){
    renderModuleFactory(setupOptions.bootstrap[0], {
      document: fs.readFileSync(filePath).toString(),
      url: options.req.url
    })
    .then(string => {
      callback(null, string);
    });
  }
}
```
这里唯一重要的部分是 renderModuleFactory 方法。 该方法所做的基本上是将 Angular 应用程序引导到从文档解析的虚拟 DOM 树中，并将结果 DOM 状态序列化为字符串，然后将其传递给 Express 引擎 API。
您当然可以向此渲染器添加一些缓存机制，以避免在每次请求时从磁盘读取。 这是一个简单的例子：

```typescript
const fs = require('fs');
const path = require('path');
import {renderModuleFactory} from '@angular/platform-server';
const cache = new Map();
export function ngExpressEngine(setupOptions){
  return function(filePath, options, callback){
    if (!cache.has(filePath)){
      const content  = fs.readFileSync(filePath).toString();
      cache.set(filePath, content);
    }
    renderModuleFactory(setupOptions.bootstrap[0], {
      document: cache.get(filePath),
      url: options.req.url
    })
    .then(string => {
      callback(null, string);
    });
  }
}
```

由于您可以完全控制服务器呈现的内容，因此您可以轻松添加任何您想要的 SEO 支持。 我们可以想象使用@angular/platform-browser 提供的 Meta 和 Title：

```typescript
import { Component } from '@angular/core';
import { Meta, Title } from "@angular/platform-browser";
@Component({
  selector: 'home-view',
  template: `<h3>Home View</h3>`
})
export class HomeView {
  constructor(seo: Meta, title: Title) {
    title.setTitle('Current Title Page');
    seo.addTags([
      {name: 'author', content: 'Wassim Chegham'},
      {name: 'keywords', content: 'angular,universal,iot,omega2+'},
      {
        name: 'description', 
        content: 'Angular Universal running on Omega2+'
      }
    ]);
  }
}
```

最后的效果如下：

![](https://img-blog.csdnimg.cn/img_convert/fb23dd8b1dd6fa4b40c686704f3081cf.png)

ITPub博客

Angular Universal 的演进历史

最新文章