在 `Spartacus-b2b-configuration.module.ts` 檔案裡有下列的程式碼：

```typescript
const baseSite = environment.epdVisualization
  ? ['powertools-epdvisualization-spa', 'powertools-spa']
  : ['powertools-spa'];
```
![](https://img-blog.csdnimg.cn/img_convert/f02c394a56aebf4ce7002865ff7ff502.png)

簡單的在 `b2b.bat` 檔案裡設定 epdVisualization=true 是不能工作的：

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

正確做法：

```sql
set CX_B2B=true&& set CX_EPD_VISUALIZATION=true&& set CX_BASE_URL=https://localhost:9002&& yarn start
```

之後有新的錯誤：
![](https://img-blog.csdnimg.cn/img_convert/500f0b008b5f1fbbb43450fa869306d1.png)

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

> Base site powertools-epdvisualization-spa doesn't exist

安裝指令碼：https://github.com/SAP/spartacus/blob/release/4.3.x/scripts/install/config.epd-visualization.sh

需要將 `CX_BASE_URL` 替換成 ccv2：

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

之後工作正常：

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

本地 demo 地址：

http://localhost:4200/powertools-epdvisualization-spa/en/USD/product/CX704/7%E2%80%9Dx12%E2%80%9D-mini-metal-lathe

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

本身也在 `cx-epd-visualization-viewer` 之內：

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

但是上圖這個高亮的 div 標籤，在 Angular HTML 檔案裡找不到。

在 `visual-viewer.service.ts` 的建構函式里初始化 SAP UI5：

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

讀取配置：
![](https://img-blog.csdnimg.cn/img_convert/9f3ee8fd4bd3354e9677f4edb4b7c3e5.png)

返回一個新的 Observable：
![](https://img-blog.csdnimg.cn/img_convert/436e107d1e76626602dae7884ce24d3b.png)

載入當前產品的 visualization，可見 SAP UI5 library 的初始化是一個 lazy load 邏輯：
![](https://img-blog.csdnimg.cn/img_convert/3ee52c5fa78f65edd551743db30041be.png)

動態載入 SAP UI5 library：
![](https://img-blog.csdnimg.cn/img_convert/ec3cb12fb0d892332e5e590012c6bbef.png)

initialize 函式是在 mergeMap 裡被呼叫的：

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

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

載入這幾個 SAP UI5 library：

```typescript
  core.loadLibrary('sap.m', loadLibraryOptions),
          core.loadLibrary('sap.ui.layout', loadLibraryOptions),
          core.loadLibrary('sap.ui.vk', loadLibraryOptions),
          core.loadLibrary('sap.ui.richtexteditor', loadLibraryOptions),
```
載入動畫：
![](https://img-blog.csdnimg.cn/img_convert/109802672456df20c3f538d3d1411b74.png)

看有哪些 html 消費了 cx-epd-visualization-viewer.

得到當前 selector 對應的 dom 元素：
![](https://img-blog.csdnimg.cn/img_convert/18c40a294f5e562055334ca5665c4e4c.png)

建立一個新的 dom 元素：
![](https://img-blog.csdnimg.cn/img_convert/6fc42acdea86d46e4915f72233df16c9.png)

載入 3d 模型資料：
![](https://img-blog.csdnimg.cn/img_convert/fbbdba6adb81270f103bb63331e8e62a.png)

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

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

package.json 引入了 SAP UI5 的 ts 依賴：`@sapui5/ts-types-esm`
![](https://img-blog.csdnimg.cn/img_convert/27a52774f9123bbc8cf240d1c1d9944a.png)

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

這個 npm package 包含所有 SAPUI5 庫的基於 ES 模組的型別簽名。

這些簽名可用於：

1. 在 IDE 中啟用高階內容輔助，例如：SAPUI5 的 (VSCode / IntelliJ / Webstorm)。

2. 使用 TypeScript 編譯器為 SAPUI5 應用程式整合型別檢查。
這兩個功能可用於以 TypeScript 和 JavaScript 編寫的 SAPUI5 應用程式。

注意：“基於 ES 模組”意味著程式碼需要使用 ES6 模組語法載入 UI5 模組，然後需要轉換為標準 UI5 要求/定義語法，這是推薦的方法。

SAP 電商雲啟用 EPD Visualization Integration 的配置步驟

相關文章