我在我本地的開發環境，執行批處理程式 `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)

Spartacus payment types 在 checkout 步驟中傳送 HTTP put 請求的實現明細

相關文章