SAP 电商云启用 EPD Visualization Integration 的配置步骤

在 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/sparta...

需要将 CX_BASE_URL 替换成 ccv2：

之后工作正常：

本地 demo 地址：

http://localhost:4200/powerto...

本身也在 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 要求/定义语法，这是推荐的方法。