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

const baseSite = environment.epdVisualization
  ? ['powertools-epdvisualization-spa', 'powertools-spa']
  : ['powertools-spa'];

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

正確做法：

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

之後有新的錯誤：

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：

之後工作正常：

本地 demo 地址：

http://localhost:4200/powertools-epdvisualization-spa/en/USD/product/CX704/7”x12”-mini-metal-lathe

本身也在 cx-epd-visualization-viewer

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

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

讀取配置：

返回一個新的 Observable：

載入當前產品的 visualization，可見 SAP UI5 library 的初始化是一個 lazy load 邏輯：

動態載入 SAP UI5 library：

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

載入這幾個 SAP UI5 library：

  core.loadLibrary('sap.m', loadLibraryOptions),
          core.loadLibrary('sap.ui.layout', loadLibraryOptions),
          core.loadLibrary('sap.ui.vk', loadLibraryOptions),
          core.loadLibrary('sap.ui.richtexteditor', loadLibraryOptions),
 

載入動畫：

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

得到當前 selector 對應的 dom 元素：

建立一個新的 dom 元素：

載入 3d 模型資料：

package.json 引入了 SAP UI5 的 ts 依賴：@sapui5/ts-types-esm

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

這些簽名可用於：

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

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

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