The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

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

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

... 繼續閱讀 ...

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

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

... 繼續閱讀 ...

如何用 Angular CLI 與 .NET CLI 快速建立 Monorepo 專案

我們漸漸在不同專案中嘗試 Monorepo 架構,讓前後端分離的專案中可以共用同一個 Repo 來進行專案開發與管理。今天這篇文章我就簡單分享如何利用 Angular CLI 與 .NET CLI 來快速打造一個 Monorepo 的專案。

... 繼續閱讀 ...

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

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

... 繼續閱讀 ...

重新認識 LINE Front-end Framework (LIFF) 前端框架 (LIFF v2)

我最早接觸 LIFF 的時候已經是 2019 的時候了,當時的 LIFF v1 與現在的 LIFF v2 已經有了蠻大的差異,我想透過這篇文章梳理一下 LIFF v2 新版本的特性,好讓我們可以更方便的在網站上透過 LIFF 提供 LINE 用戶一些好用功能。

... 繼續閱讀 ...

當 Azure DevOps 遇到 Angular 專案 npm run build 記憶體不足的解決方案

我們有個大型的 Angular 專案,原本在 Azure Pipelines 的 CI 都很順利,但是一個月前開始變的不穩定,常常會掛掉,而掛掉的原因是「記憶體不足」造成的。本篇文章我打算分享本次問題的 Log 內容,並提供一個解決方法。

... 繼續閱讀 ...

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

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

... 繼續閱讀 ...

使用 Angular 的 HttpClient 可以多利用 HttpParams 簡化查詢字串操作

我們在 Angular 使用 HttpClient 的時候,難免會需要在呼叫時加入 Query String (查詢字串),與其用「組字串」的方式來撰寫,倒不如利用 HttpParams 提供的 API 徹底簡化查詢字串操作,同時也可以提升程式碼的可讀性。這篇文章我就來介紹幾個常見用法。

... 繼續閱讀 ...

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

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

... 繼續閱讀 ...