如何在 Angular 16 加入 environments.ts 環境變數支援

從 Angular 15 開始,預設透過 ng new 建立的專案都不會有之前的 environment.ts 環境變數檔與相關設定,由於看到有人問到這個問題,而且我發現官方文件都沒有相關說明,因此我特別撰文說明如何把這個設定加回去。

... 繼續閱讀 ...

如何透過 Angular CLI 快速將專案全部都轉換成獨立元件架構

從 Angular 14 開始,全新架構獨立元件(Standalone Component)騰空出世,帶給 Angular 開發者一個全新感受,用更簡潔的程式碼、更清晰的架構,幫助開發人員架構元件與管理元件之間的依賴關係。而從 Angular 15.2.0 開始,更提供了一個 Schematics (程式碼產生器與編修工具) 可以幫助你快速移轉傳統元件獨立元件,甚至於可以連同 AppComponent 也一併轉換成獨立元件,讓整個 Angular 應用程式都變成以獨立元件為主。這篇文章我來說說這套工具的使用方式!

... 繼續閱讀 ...

使用 SPA 單一頁面應用程式設計網頁表單應考量密碼管理器需求

由於我公司有使用玉山商業銀行來處理帳務,我經常需要登入玉山全球智匯網以審核放行一些廠商款項,我一直以來都有使用密碼管理器的習慣,確保我的每個網站所使用的密碼都是不一樣的,強化資訊安全。不過,該網站在我用了數幾年之後,從不久之前開始,該網站完全無法自動登入了,深入研究後才發現,原來他們把網頁上的表單欄位的 id 屬性移除了!這篇文章我來說說我解決此問題的過程,也說說前端工程師應注意的事項!

... 繼續閱讀 ...

如何使用 Azure Static Web Apps CLI 手動部署靜態網站應用程式

現在有越來越多純前端框架推出,但無論你用哪種前端框架,最終都還是需要後端 API 才能建構出一個完整的網站,以及提供身份驗證與授權等需求。為此微軟 Azure 推出了一個全新的服務叫做 Static Web Apps (SWA) (靜態網站應用程式),不單單讓你部署前端應用程式,還幫你搞定了 API Gateway 與身份認證等常見需求,同時還結合了前端開發常見的 API 整合功能,進一步降低前後端整合門檻。今天這篇文章我主要以 Azure Static Web Apps 的命令列工具為例 (Static Web Apps CLI),帶大家走一遍從安裝到部署的完整過程。

... 繼續閱讀 ...

開發與部署網站時需注意不要使用到 ERR_UNSAFE_PORT 不安全的埠號

我昨天在授課的時候,突然遇到 Chrome 瀏覽器無法瀏覽網站的情況(ERR_UNSAFE_PORT),我踩到一個不知道算不算罕見的地雷,在深入瞭解之後,覺得有必要寫成文章提醒大家,因為你還真的很有可能會在不久的將來遇到這個問題,看完文章才不會讓你日後鬼打牆太久,讓我們繼續看下去。

... 繼續閱讀 ...