我在我本地的开发环境，执行批处理程序 `b2c.bat` 可以正常运行 4.3.x 这个版本的 Spartacus，但是 5.0 即 develop 分支就不行，报这个错误：

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

> $ info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation. error @typescript-eslint/utils@5.37.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14

使用命令行 `where ng`，发现 Angular CLI 的可执行文件 ng 的位置，是基于 node v14 这个版本的文件夹下面。 
![](https://img-blog.csdnimg.cn/img_convert/690e1300c210c0598e599e4e3f03074d.png)

环境变量如下，PATH 环境变量的值：
![](https://img-blog.csdnimg.cn/img_convert/a41939c39f877173901a7d2dfd0250a2.png)

我在上图将 path 环境变量里的 Node.js 配置成 16，但是 Angular CLI 仍然是老的 12 版本，所以需要升级。

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

使用命令行 `npm uninstall -g @angular/cli` 将 Node.js 16 文件夹下的 ng 先卸载。

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

卸载成功：
![](https://img-blog.csdnimg.cn/img_convert/c856069e02449a1e1b1ab45efa75cb25.png)

Node.js 16 下面已经看不到 ng 这个文件了：

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

然后使用命令行进行全局安装：

`npm install -g @angular/cli`

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

不加任何参数的话，版本号太高了：15.1.5
![](https://img-blog.csdnimg.cn/img_convert/d6da55dd31a8ac1461634d06b8c8fe57.png)

使用 Angular CLI 14.2.3 可以成功编译 Spartacus 5.0：

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

编译成功的截图如下：
![](https://img-blog.csdnimg.cn/img_convert/a2df7f2786c5a63ea986bf709d4607c5.png)

5.0 的 payment details，在 dropdown list 里切换 `Payment type`，不会有 HTTP 请求产生。

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

仅当点击 continue 按钮时才会触发事件。

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

Continue 按钮所在的 form Component 的选择器：cx-payment-form

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

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

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

点了 submit 后执行什么函数？在 form 的 `ngSubmit` 事件绑定函数上能够找到答案：next 函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7gxzqpkF-1676028574844)(null)]

我们在 next 函数里设置断点，点击 continue 按钮，断点触发：

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

发送事件：
![](https://img-blog.csdnimg.cn/img_convert/ebcaf65e6136103456d83c8db9dbebf9.png)

这是一个 command pattern：

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

request 请求的目的是询问一个 postUrl：

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

这个 postUrl 的值，包含在 HTTP post 请求的 response 里：

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

command 执行的 payload 在调试器里能够看到：

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

command pattern 其实并没有神秘之处，本质仍然是在 service 类里调用 connector 类来发送 HTTP 请求：

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

ITPub博客

Spartacus payment types 在 checkout 步骤中发送 HTTP put 请求的实现明细

最新文章