記載著 Will 在網路世界的學習心得與技術分享 https://blog.miniasp.com/ http://www.rssboard.org/rss-specification BlogEngine.NET 3.3.7.0 zh-TW https://blog.miniasp.com/opml.axd https://blog.miniasp.com/syndication.axd Will Huang The Will Will Web 24.567110 120.970500 <p>我最近幫一位同事整理一個已經維護 7 年的 Angular 專案，結果發現一個前後端分離的專案，只有「後端」有設定 CI / CD，前端一直以來都是人工建置與部署。我在弄 CI / CD 的時候，發現了許多 npm 套件版本有依賴問題，為了能消除這些惱人的警告，花了我好幾個小時的時間才得到徹底的解決。我這次會遇到套件依賴問題，就是因為當初的開發人員搞不定，多年來一直都視而不見，依賴問題從來都沒有搞定過，每次換人維護都用 <code>npm install --force</code> 或 <code>npm install --legacy-peer-deps</code> 來解決問題，然後一代傳一代，變成祖傳的慣例，變成技術債。如果專案有個維護妥當的 <code>package-lock.json</code> 檔案，其實要還原套件不是什麼難事，今天這篇文章我就來深入探討這個問題。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2025/03/26/In-depth-understanding-of-the-purpose-and-applicable-scenarios-of-package-lockjson#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2025/03/26/In-depth-understanding-of-the-purpose-and-applicable-scenarios-of-package-lockjson [email protected] https://blog.miniasp.com/post/2025/03/26/In-depth-understanding-of-the-purpose-and-applicable-scenarios-of-package-lockjson#comment https://blog.miniasp.com/post.aspx?id=92b9b3c5-2534-4a9f-b0c5-b61e5ede0a5b 週三, 26 三月 2025 14:40:00 +0000 Angular JavaScript npm package.json package-lock.json will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=92b9b3c5-2534-4a9f-b0c5-b61e5ede0a5b https://blog.miniasp.com/trackback.axd?id=92b9b3c5-2534-4a9f-b0c5-b61e5ede0a5b https://blog.miniasp.com/post/2025/03/26/In-depth-understanding-of-the-purpose-and-applicable-scenarios-of-package-lockjson#comment https://blog.miniasp.com/syndication.axd?post=92b9b3c5-2534-4a9f-b0c5-b61e5ede0a5b <p>最近嘗試在 Angular 的「獨立元件」架構下撰寫單元測試，發現有些技巧官方文件沒寫清楚的問題，需要特別注意。除此之外，這篇文章我還打算整理一些學習資源給大家參考。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2024/02/21/Angular-Unit-Testing-Learning-Resources-and-provideHttpClientTesting#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2024/02/21/Angular-Unit-Testing-Learning-Resources-and-provideHttpClientTesting [email protected] https://blog.miniasp.com/post/2024/02/21/Angular-Unit-Testing-Learning-Resources-and-provideHttpClientTesting#comment https://blog.miniasp.com/post.aspx?id=8053cd3c-0494-4f3b-9896-294a91802ea1 週三, 21 二月 2024 15:59:00 +0000 Angular Unit Testing angular 單元測試 will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=8053cd3c-0494-4f3b-9896-294a91802ea1 https://blog.miniasp.com/trackback.axd?id=8053cd3c-0494-4f3b-9896-294a91802ea1 https://blog.miniasp.com/post/2024/02/21/Angular-Unit-Testing-Learning-Resources-and-provideHttpClientTesting#comment https://blog.miniasp.com/syndication.axd?post=8053cd3c-0494-4f3b-9896-294a91802ea1 <p>我們最近有個 Angular 專案需要用到多國語系架構，所以重新看了一遍 <a href="https://angular.io/guide/i18n-overview">Angular Internationalization</a> 官方文件，並且實際操作了一遍，這篇文章我就稍微記錄一下這個過程與注意事項。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2024/01/27/Angular-Internationalization-i18n#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2024/01/27/Angular-Internationalization-i18n [email protected] https://blog.miniasp.com/post/2024/01/27/Angular-Internationalization-i18n#comment https://blog.miniasp.com/post.aspx?id=57d02800-3ab3-4ac2-8de0-182e28dbfbb9 週六, 27 一月 2024 14:29:00 +0000 Angular angular i18n will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=57d02800-3ab3-4ac2-8de0-182e28dbfbb9 https://blog.miniasp.com/trackback.axd?id=57d02800-3ab3-4ac2-8de0-182e28dbfbb9 https://blog.miniasp.com/post/2024/01/27/Angular-Internationalization-i18n#comment https://blog.miniasp.com/syndication.axd?post=57d02800-3ab3-4ac2-8de0-182e28dbfbb9 <p>我們在 Angular 官網的 <a href="https://angular.io/guide/versions">Version compatibility</a> 頁面可以看到不同版本的 Angular 其實有匹配的 Node.js 版本，太新的 Node.js 不能用，太舊也不能用。不過，我們通常在開發 Angular 一段時間後，多少都會面臨到需要維護不同專案採用不同 Angular 版本的狀況，這時候你就會需要管理多個不同版本的 Node.js 執行環境，這時候就可以考慮使用 NVM 來管理多個不同的 Node.js 版本。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/12/28/Use-NVM-to-Manage-Multiple-Node-Versions#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/12/28/Use-NVM-to-Manage-Multiple-Node-Versions [email protected] https://blog.miniasp.com/post/2023/12/28/Use-NVM-to-Manage-Multiple-Node-Versions#comment https://blog.miniasp.com/post.aspx?id=0b130833-bbef-4dc5-92aa-9b49dfd702d4 週四, 28 十二月 2023 15:59:00 +0000 Angular Web 介紹好用工具 前端工程研究 node.js nvm Node Version Manager will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=0b130833-bbef-4dc5-92aa-9b49dfd702d4 https://blog.miniasp.com/trackback.axd?id=0b130833-bbef-4dc5-92aa-9b49dfd702d4 https://blog.miniasp.com/post/2023/12/28/Use-NVM-to-Manage-Multiple-Node-Versions#comment https://blog.miniasp.com/syndication.axd?post=0b130833-bbef-4dc5-92aa-9b49dfd702d4 <p>Angular 官方正式推出 <a href="https://angular.dev/">angular.dev</a> 全新官網，未來將取代 <a href="https://angular.io/">angular.io</a> 成為主要的 Angular 官方網站。這篇文章我將翻譯官方部落格釋出的 <a href="https://blog.angular.io/announcing-angular-dev-1e1205fa3039">Announcing Angular.dev</a> 文章並翻譯成中文，跟大家分享這個 Angular 的文藝復興時刻！</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/11/08/Announcing-Angular-dev#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/11/08/Announcing-Angular-dev [email protected] https://blog.miniasp.com/post/2023/11/08/Announcing-Angular-dev#comment https://blog.miniasp.com/post.aspx?id=fd224c4f-20fd-49b1-beea-0cb43c6639d3 週三, 8 十一月 2023 12:08:00 +0000 Angular Angular will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=fd224c4f-20fd-49b1-beea-0cb43c6639d3 https://blog.miniasp.com/trackback.axd?id=fd224c4f-20fd-49b1-beea-0cb43c6639d3 https://blog.miniasp.com/post/2023/11/08/Announcing-Angular-dev#comment https://blog.miniasp.com/syndication.axd?post=fd224c4f-20fd-49b1-beea-0cb43c6639d3 <p>今天收到一個 Angular 9 的老舊專案，由於我電腦目前的 Node.js 版本太新，無法正常開發，由於我只是單純的想在本機建置專案，所以決定使用 Docker 容器來準備建置環境。這篇文章我就來分享如何快速在容器中打造一個 Angular 的建置環境。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/10/05/How-to-build-old-Angular-project-in-Container#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/10/05/How-to-build-old-Angular-project-in-Container [email protected] https://blog.miniasp.com/post/2023/10/05/How-to-build-old-Angular-project-in-Container#comment https://blog.miniasp.com/post.aspx?id=6879b03f-2f76-4b98-8276-d9a08fee79a3 週四, 5 十月 2023 15:29:00 +0000 Angular Container Docker angular will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=6879b03f-2f76-4b98-8276-d9a08fee79a3 https://blog.miniasp.com/trackback.axd?id=6879b03f-2f76-4b98-8276-d9a08fee79a3 https://blog.miniasp.com/post/2023/10/05/How-to-build-old-Angular-project-in-Container#comment https://blog.miniasp.com/syndication.axd?post=6879b03f-2f76-4b98-8276-d9a08fee79a3 <p>Angular 16 有個新特性，可以大幅簡化取得路由參數的語法，對新手老手來說都是福音，這篇文章我就來說說這個全新路由特性，相信這個特性大家看了都喜歡！😍</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/07/24/Angular-16-New-Features-Route-to-Component-Inputs#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/07/24/Angular-16-New-Features-Route-to-Component-Inputs [email protected] https://blog.miniasp.com/post/2023/07/24/Angular-16-New-Features-Route-to-Component-Inputs#comment https://blog.miniasp.com/post.aspx?id=dc66d3d1-bd2a-46fb-a490-4bad5d3d3fed 週一, 24 七月 2023 04:48:00 +0000 Angular angular angular 16 will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=dc66d3d1-bd2a-46fb-a490-4bad5d3d3fed https://blog.miniasp.com/trackback.axd?id=dc66d3d1-bd2a-46fb-a490-4bad5d3d3fed https://blog.miniasp.com/post/2023/07/24/Angular-16-New-Features-Route-to-Component-Inputs#comment https://blog.miniasp.com/syndication.axd?post=dc66d3d1-bd2a-46fb-a490-4bad5d3d3fed <p>Tailwind CSS 是一個目前正夯的前端 CSS 框架，用於快速開發現代網頁應用程序，在我們公司也在許多專案使用。它提供了一組可重用的 CSS 類別，這些類別可以應用於 HTML 元素，以快速設計和定義網頁的外觀和排版。本篇文章我將分享如何在 Angular 16 專案加入 Tailwind CSS 相關資源。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/07/18/How-to-add-Tailwind-CSS-to-Angular-16#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/07/18/How-to-add-Tailwind-CSS-to-Angular-16 [email protected] https://blog.miniasp.com/post/2023/07/18/How-to-add-Tailwind-CSS-to-Angular-16#comment https://blog.miniasp.com/post.aspx?id=8cff4416-0992-4412-bf00-7b8483969258 週二, 18 七月 2023 03:30:00 +0000 Angular Tailwind CSS angular 16 will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=8cff4416-0992-4412-bf00-7b8483969258 https://blog.miniasp.com/trackback.axd?id=8cff4416-0992-4412-bf00-7b8483969258 https://blog.miniasp.com/post/2023/07/18/How-to-add-Tailwind-CSS-to-Angular-16#comment https://blog.miniasp.com/syndication.axd?post=8cff4416-0992-4412-bf00-7b8483969258 <p>Bootstrap 5 是一個流行的前端開發框架，用於構建具有響應式設計的網站和應用程序。Bootstrap 最初由 Twitter 團隊開發，並於 2011 年首次發布。Bootstrap 5 是 Bootstrap 框架的最新版本，於 2020 年底發布。本篇文章我將分享如何用最有效率的方式在 Angular 16 專案加入 Bootstrap 5 相關資源。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/07/16/How-to-add-bootstrap-5-to-Angular-16#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/07/16/How-to-add-bootstrap-5-to-Angular-16 [email protected] https://blog.miniasp.com/post/2023/07/16/How-to-add-bootstrap-5-to-Angular-16#comment https://blog.miniasp.com/post.aspx?id=bc3fa1cd-4e2b-4b72-a03f-1bb294054cf0 週日, 16 七月 2023 15:59:00 +0000 Angular bootstrap angular 16 bootstrap 5 will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=bc3fa1cd-4e2b-4b72-a03f-1bb294054cf0 https://blog.miniasp.com/trackback.axd?id=bc3fa1cd-4e2b-4b72-a03f-1bb294054cf0 https://blog.miniasp.com/post/2023/07/16/How-to-add-bootstrap-5-to-Angular-16#comment https://blog.miniasp.com/syndication.axd?post=bc3fa1cd-4e2b-4b72-a03f-1bb294054cf0 <p>從 Angular 15 開始，預設透過 <code>ng new</code> 建立的專案都不會有之前的 <code>environment.ts</code> 環境變數檔與相關設定，由於看到有人問到這個問題，而且我發現官方文件都沒有相關說明，因此我特別撰文說明如何把這個設定加回去。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/06/19/Angular-environment-file-using-fileReplacements#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/06/19/Angular-environment-file-using-fileReplacements [email protected] https://blog.miniasp.com/post/2023/06/19/Angular-environment-file-using-fileReplacements#comment https://blog.miniasp.com/post.aspx?id=ea8d3c82-bb22-4a83-a915-c986bff07e99 週一, 19 六月 2023 15:59:00 +0000 Angular angular fileReplacements will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=ea8d3c82-bb22-4a83-a915-c986bff07e99 https://blog.miniasp.com/trackback.axd?id=ea8d3c82-bb22-4a83-a915-c986bff07e99 https://blog.miniasp.com/post/2023/06/19/Angular-environment-file-using-fileReplacements#comment https://blog.miniasp.com/syndication.axd?post=ea8d3c82-bb22-4a83-a915-c986bff07e99 <p>從 Angular 14 開始，全新架構<strong>獨立元件</strong>(Standalone Component)騰空出世，帶給 Angular 開發者一個全新感受，用更簡潔的程式碼、更清晰的架構，幫助開發人員架構元件與管理元件之間的依賴關係。而從 Angular 15.2.0 開始，更提供了一個 Schematics (程式碼產生器與編修工具) 可以幫助你快速移轉<strong>傳統元件</strong>為<strong>獨立元件</strong>，甚至於可以連同 AppComponent 也一併轉換成獨立元件，讓整個 Angular 應用程式都變成以<strong>獨立元件</strong>為主。這篇文章我來說說這套工具的使用方式！</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/04/10/Migration-to-Standalone-Component-using-Angular-CLI#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/04/10/Migration-to-Standalone-Component-using-Angular-CLI [email protected] https://blog.miniasp.com/post/2023/04/10/Migration-to-Standalone-Component-using-Angular-CLI#comment https://blog.miniasp.com/post.aspx?id=be649e66-41c3-41a3-8702-f4434d788b2b 週一, 10 四月 2023 01:05:00 +0000 Angular Angular CLI Angular 15.2 獨立元件 Standalone component will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=be649e66-41c3-41a3-8702-f4434d788b2b https://blog.miniasp.com/trackback.axd?id=be649e66-41c3-41a3-8702-f4434d788b2b https://blog.miniasp.com/post/2023/04/10/Migration-to-Standalone-Component-using-Angular-CLI#comment https://blog.miniasp.com/syndication.axd?post=be649e66-41c3-41a3-8702-f4434d788b2b <p>我們漸漸在不同專案中嘗試 <a href="https://medium.com/hannah-lin/%E7%82%BA%E4%BB%80%E9%BA%BC%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E8%B6%8A%E4%BE%86%E8%B6%8A%E6%84%9B%E4%BD%BF%E7%94%A8-monorepo-%E6%9E%B6%E6%A7%8B-661afa90910a">Monorepo</a> 架構，讓前後端分離的專案中可以共用同一個 Repo 來進行專案開發與管理。今天這篇文章我就簡單分享如何利用 Angular CLI 與 .NET CLI 來快速打造一個 Monorepo 的專案。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/04/06/Create-monorepo-using-Angular-CLI-and-NET-CLI#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/04/06/Create-monorepo-using-Angular-CLI-and-NET-CLI [email protected] https://blog.miniasp.com/post/2023/04/06/Create-monorepo-using-Angular-CLI-and-NET-CLI#comment https://blog.miniasp.com/post.aspx?id=e6c2af85-c7ef-44a6-bf32-ddd5d4220d49 週四, 6 四月 2023 15:29:00 +0000 Angular ASP.NET Core monorepo Angular CLI .net cli will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=e6c2af85-c7ef-44a6-bf32-ddd5d4220d49 https://blog.miniasp.com/trackback.axd?id=e6c2af85-c7ef-44a6-bf32-ddd5d4220d49 https://blog.miniasp.com/post/2023/04/06/Create-monorepo-using-Angular-CLI-and-NET-CLI#comment https://blog.miniasp.com/syndication.axd?post=e6c2af85-c7ef-44a6-bf32-ddd5d4220d49 <p>由於我公司有使用<a href="https://www.esunbank.com.tw/">玉山商業銀行</a>來處理帳務，我經常需要登入<a href="https://gib.esunbank.com/">玉山全球智匯網</a>以審核放行一些廠商款項，我一直以來都有使用<a href="https://zh.wikipedia.org/wiki/%E5%AF%86%E7%A2%BC%E7%AE%A1%E7%90%86%E5%93%A1">密碼管理器</a>的習慣，確保我的每個網站所使用的密碼都是不一樣的，強化資訊安全。不過，該網站在我用了數幾年之後，從不久之前開始，該網站完全無法自動登入了，深入研究後才發現，原來他們把網頁上的表單欄位的 <code>id</code> 屬性移除了！這篇文章我來說說我解決此問題的過程，也說說前端工程師應注意的事項！</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/02/17/Keep-the-id-attribute-for-forms-design-in-SPA#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/02/17/Keep-the-id-attribute-for-forms-design-in-SPA [email protected] https://blog.miniasp.com/post/2023/02/17/Keep-the-id-attribute-for-forms-design-in-SPA#comment https://blog.miniasp.com/post.aspx?id=405f71d5-40e0-426d-a67d-e15bf06f9a8a 週五, 17 二月 2023 15:43:00 +0000 Angular Security Web spa Tampermonkey will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=405f71d5-40e0-426d-a67d-e15bf06f9a8a https://blog.miniasp.com/trackback.axd?id=405f71d5-40e0-426d-a67d-e15bf06f9a8a https://blog.miniasp.com/post/2023/02/17/Keep-the-id-attribute-for-forms-design-in-SPA#comment https://blog.miniasp.com/syndication.axd?post=405f71d5-40e0-426d-a67d-e15bf06f9a8a <p>我最早接觸 <a href="https://developers.line.biz/en/docs/liff/">LIFF</a> 的時候已經是 2019 的時候了，當時的 LIFF v1 與現在的 LIFF v2 已經有了蠻大的差異，我想透過這篇文章梳理一下 LIFF v2 新版本的特性，好讓我們可以更方便的在網站上透過 LIFF 提供 LINE 用戶一些好用功能。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/01/29/The-LINE-Front-end-Framework-LIFF-v2#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/01/29/The-LINE-Front-end-Framework-LIFF-v2 [email protected] https://blog.miniasp.com/post/2023/01/29/The-LINE-Front-end-Framework-LIFF-v2#comment https://blog.miniasp.com/post.aspx?id=19fb8b0f-bfdf-46b3-97f6-1c02bbfabbe1 週日, 29 一月 2023 04:07:00 +0000 Angular Web LIFF LINE Front-end Framework LINE Login will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=19fb8b0f-bfdf-46b3-97f6-1c02bbfabbe1 https://blog.miniasp.com/trackback.axd?id=19fb8b0f-bfdf-46b3-97f6-1c02bbfabbe1 https://blog.miniasp.com/post/2023/01/29/The-LINE-Front-end-Framework-LIFF-v2#comment https://blog.miniasp.com/syndication.axd?post=19fb8b0f-bfdf-46b3-97f6-1c02bbfabbe1 <p>我們有個大型的 Angular 專案，原本在 Azure Pipelines 的 CI 都很順利，但是一個月前開始變的不穩定，常常會掛掉，而掛掉的原因是「記憶體不足」造成的。本篇文章我打算分享本次問題的 Log 內容，並提供一個解決方法。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2023/01/22/Azure-DevOps-Angular-npm-run-build-JavaScript-heap-out-of-memory#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2023/01/22/Azure-DevOps-Angular-npm-run-build-JavaScript-heap-out-of-memory [email protected] https://blog.miniasp.com/post/2023/01/22/Azure-DevOps-Angular-npm-run-build-JavaScript-heap-out-of-memory#comment https://blog.miniasp.com/post.aspx?id=0b7d5d13-dab9-4d74-83e6-c5f209d2b2a0 週日, 22 一月 2023 06:49:00 +0000 Angular Azure DevOps JavaScript javascript angular Azure Pipelines node.js npm Azure DevOps Services will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=0b7d5d13-dab9-4d74-83e6-c5f209d2b2a0 https://blog.miniasp.com/trackback.axd?id=0b7d5d13-dab9-4d74-83e6-c5f209d2b2a0 https://blog.miniasp.com/post/2023/01/22/Azure-DevOps-Angular-npm-run-build-JavaScript-heap-out-of-memory#comment https://blog.miniasp.com/syndication.axd?post=0b7d5d13-dab9-4d74-83e6-c5f209d2b2a0