Angular 開發人員使用 HttpClient 與後臺伺服器互動。SAP Spartacus Storefront 支援伺服器端渲染即 SSR，那麼工作在 SSR 模式下的 Spartacus，又是透過什麼方式呼叫的 OCC API 呢？

通用應用程式(`Universal applications`)使用 Angular 平臺伺服器包(`platform-server`)（與平臺瀏覽器 `platform-browser`相對），它提供 DOM、XMLHttpRequest 和其他不依賴瀏覽器的底層特性的伺服器端實現。

伺服器（在 Angular 官網例子中使用的是 Node.js Express）將客戶端對應用程式頁面的請求傳遞給 NgUniversal ngExpressEngine。 在底層，該引擎呼叫 Universal 的 renderModule() 函式，同時提供快取和其他有用的實用程式。

renderModule() 函式將模板 HTML 頁面（通常是 index.html）、包含元件的 Angular 模組和確定要顯示哪些元件的路由作為輸入。路由來自客戶端對伺服器的請求。

下圖是 SAP Spartacus `AppServerModule`，我們可以看到他匯入了來自 `@angular/platform-server` 開發包的 `ServerModule` 和 `ServerTransferStateModule` 這兩個 NgModule：

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

在 Spartacus 原始碼裡，雖然從 `@angular/platform-server` 匯入了 `renderModule` 函式，但是沒有在我們的程式碼裡顯式呼叫它。

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

renderModule() 函式將模板 HTML 頁面（通常是 index.html）、包含 Component 的 Angular  modules 和確定要顯示哪些元件的路由作為輸入。路由來自客戶端對伺服器的請求。

每個請求都會為請求的路由生成適當的檢視。renderModule() 函式在模板的 `<app>` 標記內渲染檢視，為客戶端建立一個完整的 HTML 頁面。

由於通用應用程式不在瀏覽器中執行，因此伺服器上可能缺少某些瀏覽器 API 和功能。

例如，伺服器端應用程式不能引用僅限瀏覽器的全域性物件，例如視窗、文件、導航器或位置。

Angular 為這些物件提供了一些可注入的抽象，例如 Location 或 DOCUMENT； 它可能會充分替代這些 API。 如果 Angular 不提供它，則可以編寫新的抽象，在瀏覽器中委派給瀏覽器 API，在伺服器上委派給替代實現（也稱為 shimming）。

下面是 SAP Spartacus 使用可注入抽象的一個例子：

1. 從 `@angular/common` 包中匯入 `DOCUMENT`:

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

2. 透過建構函式進入注入：

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

3. 在應用程式碼中使用：

![](https://img-blog.csdnimg.cn/img_convert/8cfb7cc7a6911f6c528cf9ed1a40a4e4.png)</app>

SAP Spartacus SSR 中的 shimming 實現的一個例子

相關文章