全端開發人員天梯

最近接手一個專案，需要將舊 Angular 9 專案加入之前客戶沒有實作的 lazy loading 功能，專案包含了將近 600 個頁面，之後還會增加。

重構的過程是很順利的，不過在 lazy loading 架構完成後，卻出現了 production build 時間大幅增加的問題，花費了不少時間研究，總算是以較低的代價換回了 build 速度。

這篇文章就來分享一下整個過程和結論。

Azure CloudShell 可以幫助我們直接在 Azure Portal 上直接下指令進行各種資源的操作，不過偶爾我們需要將地端的檔案上傳到 Azure CloudShell 或是需要將在 Azure CloudShell 上面的檔案下載下來，今天分享一些小技巧，讓我們可以輕鬆的在 Azure CloudShell 上傳/下載檔案。

Angular 14 將加強原有的 inject 功能，讓我們在元件的建構式內可以直接透過呼叫 inject(...) 取得原本所有可以在建構式注入的內容，這種做法可以大幅簡化原來建構式的程式，但也可能帶來一些問題，今天就來看一下神奇的 inject() 新用法。

Angular 14 即將推出強型別的 Reactive Forms 表單功能，讓我們在開發過程中可以享受強型別定義帶來的好處，不用再擔心弱型別不小心打錯字等等問題，今天就來看一下如何使用強型別的表單功能！

Angular 14 預計會推出一個重磅功能 - 「Standalone Components / Directives / Pipes」！這個功能允許我們「獨立」的使用 components、directives 和 pipes，不用再強制依靠 @NgModule。

目前 Angular 14 已經推出 RC.0 了，這個版本內也包含了 Standalone 的開發人員預覽版本（developer preview of standalone），讓我們可以搶先體驗一下這種獨立使用元件的版本，這篇文章就來介紹一下為什麼要使用 Standalone 以及該如何使用。

NgRx 是一個強大，且功能完整的 Angular 狀態管理套件，在我們的應用程式越來越複雜的時候，它很適合用來管理一些全域的狀態，並透過適度的抽象化以及加入一定的規範，降低整體程式的耦合性，打造出更好維護及管理的程式碼。

接下來的一系列文章將會介紹 NgRx 的核心精神，使用方式及相關工具。

前陣子在 Youtube 上看到了一部影片，介紹了好幾個 node.js 的套件，來幫助我們打造漂亮的 CLI，才後知後覺的發現一直在使用的 Angular CLI、Schematics 等等，許多由 node.js 開發的 CLI 工具，背後那些美觀的畫面都是基於這些套件，而不是自己刻的，所以整理了一下這些套件的介紹與示範！

momentjs，可以說是最多人使用的老牌 JavaScript 時間處理類別庫；當然，隨著技術的進步，momentjs 也有不少議題被提出，其中最大的問題就是檔案太過龐大了，且隨著現在前端技術的發展，我們經常使用 webpack 等工具將前端程式進行打包，同時過濾 (tree shaking) 要不要的程式，以減少整體檔案大小。

而 momentjs 由於原始設計的關係，在做 tree shaking 的時候會無法移除掉用不到的 API，同時還有龐大的語系檔，嚴重影響最終 bundle 檔案大小。

抱怨歸抱怨，momentjs 還是非常多人在用，因此只能盡量的做到減少大小，至少不要把龐大的語系檔一起 bundle 進來。

Angular 過去是將 webpack 整個封裝起來的，而隨著版本推移，現在也能自訂 webpack 了，今天就來看一下如何在 Angular 中自訂 webpack，同時移除 momentjs 中過大的語系檔。

源自前陣子我們家業務問的問題：「客戶原來的系統能將 Excel 儲存格內容貼到網頁上，我們辦得到嗎？」。

實際上當然是肯定的，但還真的沒有特別嘗試過該如何做到，花了點時間研究發現也沒那麼困難，也把一些種點整理一下，以免以後自己忘記。

透過 Inno Setup 打包安裝檔非常方便，由於都是腳本指令，加上 Inno Setup 本身也支援以 CLI 的方式執行，因此要搭配 CI/CD 是完全可行的，本篇就以 Azure DevOps 為例，說明一下使用 Inno Setup 打包安裝檔需要注意的一些事項。

以下為使用 Pipeline as code 的方式說明，因此都是 yaml 設定檔，當然如果使用 Classic editor 的話，也都可以找到對應的 task