[Angular Universal](https://angular.cn/guide/universal)

本文介紹 Angular Universal（統一平臺），一項在服務端執行 Angular 應用的技術，即伺服器端渲染。

如下圖 package.json 裡定義的依賴 @nguniversal/express-engine 所示：

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

標準的 Angular 應用會執行在瀏覽器中，它會在 DOM 中渲染頁面，以響應使用者的操作。 而Angular Universal 會在服務端執行，生成一些靜態的應用頁面，稍後再透過客戶端進行啟動。 這意味著該應用的渲染通常會更快，讓使用者可以在應用變得完全可互動之前，先檢視應用的佈局。

伺服器端渲染返回的 HTML 原始碼，雖然沒有載入對應的 .js 檔案，無法響應使用者輸入，但是可以給使用者一個直觀完整的頁面佈局。

Node.js Express Web 伺服器則會根據客戶端的請求，利用 Universal 編譯 HTML 頁面。

要建立服務端應用模組 app.server.module.ts，請執行以下 CLI 命令：

> ng add @nguniversal/express-engine

該命令會自動生成如下綠色高亮所示的檔案：
![](https://img-blog.csdnimg.cn/img_convert/d98df19289d166924abbb95ab8850d40.png)

要使用 Universal 在本地系統中渲染你的應用，請使用如下命令：

> npm run dev:ssr

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

這個 serve-ssr 定義在 Angular.json 裡：
![](https://img-blog.csdnimg.cn/img_convert/19cd8cce98ffbc14f386357c3fbc21aa.png)

而 server target 定義如下：
![](https://img-blog.csdnimg.cn/img_convert/7d7df170542e857226e53236558afe85.png)

透過 routerLinks 導航時能正常工作，因為它們使用的是原生的連結標籤（\<a rel="nofollow">).

不支援除了點選 routerLink 以外的任何使用者事件。你必須等待完整的客戶端應用啟動並執行，或者使用 preboot 之類的庫來緩衝這些事件，這樣你就可以在客戶端指令碼載入完畢後重放這些事件。

Angular Universal 可以為你生成應用的靜態版本，它易搜尋、可連結，瀏覽時也不必藉助 JavaScript。 它也讓站點可以被預覽，因為每個 URL 返回的都是一個完全渲染好的頁面。

使用 Angular Universal，你可以為應用生成“著陸頁”，它們看起來就和完整的應用一樣。 這些著陸頁是純 HTML，並且即使 JavaScript 被禁用了也能顯示。 這些頁面不會處理瀏覽器事件，不過它們可以用 [routerLink](guide/router-reference#router-link) 在這個網站中導航。

在實踐中，你可能要使用一個著陸頁的靜態版本來保持使用者的注意力。 同時，你也會在幕後載入完整的 Angular 應用。 使用者會覺得著陸頁幾乎是立即出現的，而當完整的應用載入完之後，又可以獲得完整的互動體驗。

Universal Web 伺服器使用 Universal 模板引擎渲染出的靜態 HTML 來響應對應用頁面的請求。 伺服器接收並響應來自客戶端（通常是瀏覽器）的 HTTP 請求，並回復靜態檔案，如指令碼、CSS 和圖片。 它可以直接響應資料請求，也可以作為獨立資料伺服器的代理進行響應。

任何一種 Web 伺服器技術都可以作為 Universal 應用的伺服器，只要它能呼叫 Universal 的 renderModule() 函式。 這裡所討論的這些原則和決策點也適用於任何 Web 伺服器技術。

Universal 應用使用 platform-server 包（而不是 platform-browser），它提供了 DOM 的服務端實現、XMLHttpRequest 以及其它不依賴瀏覽器的底層特性。

伺服器（這個例子中使用的是 Node.js Express 伺服器）會把客戶端對應用頁面的請求傳給 NgUniversal 的 ngExpressEngine。在內部實現上，它會呼叫 Universal 的 renderModule() 函式，它還提供了快取等有用的工具函式。

關於具體的除錯步驟，參考我這些文章：

* [SAP Spartacus 伺服器端渲染單步除錯步驟之一：應用程式準備工作](https://blog.csdn.net/i042416/article/details/119782170)
* [SAP Spartacus 伺服器端渲染單步除錯步驟之二：在伺服器端執行應用程式 Angular 程式碼](https://blog.csdn.net/i042416/article/details/119782962)

# 使用瀏覽器 API

由於 Universal 應用並沒有執行在瀏覽器中，因此該伺服器上可能會缺少瀏覽器的某些 API 和其它能力。

比如，服務端應用不能引用瀏覽器獨有的全域性物件，比如 window、document、navigator 或 location。

Angular 提供了一些這些物件的可注入的抽象層，比如 Location 或 DOCUMENT，它可以作為你所呼叫的 API 的等效替身。 如果 Angular 沒有提供它，你也可以寫一個自己的抽象層，當在瀏覽器中執行時，就把它委託給瀏覽器 API，當它在伺服器中執行時，就提供一個符合要求的代用實現（也叫墊片 - shimming）。

同樣，由於沒有滑鼠或鍵盤事件，因此 Universal 應用也不能依賴於使用者點選某個按鈕來顯示每個元件。 Universal 應用必須僅僅根據客戶端過來的請求決定要渲染的內容。 把該應用做成可路由的，就是一種好方案。

# Universal 模板引擎

server.ts 的核心邏輯如下程式碼所示：

```typescript
const server = express();
  const distFolder = join(process.cwd(), 'dist/mystore/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
    ? 'index.original.html'
    : 'index';

server.set('trust proxy', 'loopback');

server.engine(
    'html',
    ngExpressEngine({
      bootstrap: AppServerModule,
    })
  );
```

其中 ngExpressEngine 的來源：

```typescript
const ngExpressEngine = NgExpressEngineDecorator.get(engine, { timeout: 90000, concurrency: 1, 
  forcedSsrTimeout:90000,
  maxRenderTime:100000,
  cache: true, cacheSize: 10,
  renderingStrategyResolver: (req) => RenderingStrategy.DEFAULT});
```

ngExpressEngine() 是對 Universal 的 renderModule() 函式的封裝。它會把客戶端請求轉換成服務端渲染的 HTML 頁面。它接受一個具有下列屬性的物件，型別為 NgSetupOptions：

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

bootstrap：在伺服器上渲染時用於引導應用程式的根 NgModule 或 NgModule 工廠。對於 SAP Commerce Cloud 應用，它是 AppServerModule。它是 Universal 服務端渲染器和 Angular 應用之間的橋樑。

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

ngExpressEngine() 函式返回了一個會解析成渲染好的頁面的承諾（Promise）。 接下來你的引擎要決定拿這個頁面做點什麼。 在這個引擎的 Promise 回撥函式中，把渲染好的頁面返回給了 Web 伺服器，然後伺服器透過 HTTP 響應把它轉發給了客戶端。

# 過濾請求的 URL

Web 伺服器必須把對應用頁面的請求和其它型別的請求區分開。

這可不像攔截對根路徑 / 的請求那麼簡單。 瀏覽器可以請求應用中的任何一個路由地址，比如 /dashboard、/heroes 或 /detail:12。 事實上，如果應用只會透過伺服器渲染，那麼應用中點選的任何一個連結都會發到伺服器，就像導航時的地址會發到路由器一樣。

幸運的是，應用的路由具有一些共同特徵：它們的 URL 一般不帶副檔名。 （資料請求也可能缺少副檔名，但是它們很容易識別出來，因為它們總是以 /api 開頭，所有的靜態資源的請求都會帶有一個副檔名，比如 main.js 或 /node_modules/zone.js/dist/zone.js）。

由於使用了路由，所以我們可以輕鬆的識別出這三種型別的請求，並分別處理它們。

* 資料請求：請求的 URL 用 /api 開頭
* 應用導航：請求的 URL 不帶副檔名
* 靜態資源：所有其它請求。

Node.js Express 伺服器是一系列中介軟體構成的管道，它會挨個對 URL 請求進行過濾和處理。 你可以呼叫 app.get() 來配置 Express 伺服器的管道，就像下面這個資料請求一樣：

```typescript
// TODO: implement data requests securely
server.get('/api/**', (req, res) => {
  res.status(404).send('data requests are not yet supported');
});
```

上述程式碼的含義是，當前 SSR 伺服器，不支援處理資料請求。

下列程式碼會過濾出不帶副檔名的 URL，並把它們當做導航請求進行處理。

```typescript
// All regular routes use the Universal engine
server.get('*', (req, res) => {
  res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
```

# 安全的提供靜態檔案

單獨的 server.use() 會處理所有其它 URL，比如對 JavaScript 、圖片和樣式表等靜態資源的請求。
要保證客戶端只能下載那些允許他們訪問的檔案，你應該把所有面向客戶端的資原始檔都放在 /dist 目錄下，並且只允許客戶端請求來自 /dist 目錄下的檔案。

```typescript
const distFolder = join(process.cwd(), 'dist/mystore/browser');
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
  maxAge: '1y'
}));
```</a>

Angular Universal：Angular 統一平臺簡介

相關文章