iT邦幫忙

2024 iThome 鐵人賽

DAY 11
1
佛心分享-SideProject30

收納規劃APP系列 第 11

Day11:開發環境跟Demo環境(Stackblitz )兼容性問題

  • 分享至 

  • xImage
  •  

初始計劃

  • 原本打算使用 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天挑戰另外加了不少難度,把正常的馬拉松跑成負重訓練還跑錯路
/images/emoticon/emoticon70.gif

後記

ng-zorro-antd@18 不需要 ng-antd-color-picker
所以我是白繞幾圈/images/emoticon/emoticon25.gif


上一篇
Day10:瀏覽器座標 vs SVG 座標演示
下一篇
Day12:家具設定視窗
系列文
收納規劃APP32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言