初始計劃

• 原本打算使用 ng-bootstrap 製作彈窗
• 其他UI部分計劃自己開發

開發過程

• 成功開發彈窗模組
• 遇到 input、checkbox、Radio 等組件的挑戰
  • 花費約 1.5 小時思考到底要不要自己作
• 最終決定使用 ng-zorro 框架

版本兼容性問題

• 本地環境：Angular 16
• Demo 環境：Angular 18
• ng-antd-color-picker（顏色選擇器）：僅支援 Angular 16、17

解決過程

• 在 Stackblitz 上將版本降至 Angular 16
  • 結果：Demo 環境出現問題
• 經過 1.5 小時的搜索和測試無果
• 升級至 Angular 17
  • Demo 環境恢復正常
• 安裝 ng-zorro 後再次出現問題
  • 疑似 .less 檔案存在安全隱患，Stackblitz 不支援

最終解決方案

• 移除 angular.json 中的 theme.less 引用
• 改為直接引入樣式
• 成功顯示預期結果

            "styles": [
              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
              "node_modules/ng-zorro-antd/resizable/style/index.min.css",
              "node_modules/ng-zorro-antd/code-editor/style/index.min.css",
              "node_modules/ng-zorro-antd/graph/style/index.min.css",
              "src/global_styles.scss"
            ],

總結

原本想說彈窗用ng-bootstrap，其他自己刻
但後來發現自己不虧是長得很美的人，想的也很美
繞了一大圈，最後投奔 ng-zorro 的懷抱

結果發現居然還用了不一樣的版本，環境的問題搞了好一陣子
幫自己的30天挑戰另外加了不少難度，把正常的馬拉松跑成負重訓練還跑錯路

後記

ng-zorro-antd@18 不需要 ng-antd-color-picker
所以我是白繞幾圈