The Will Will Web

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

在 Angular 專案中 RxJS 實現 Unsubscribe 取消訂閱的四種常見方法

RxJS 可以將所有 Observable 物件簡單區分成兩種不同類型的,一種是有限事件數量的 Observable 物件,例如 HttpClient 相關 API 在訂閱之後就只會有一筆資料回來,這種類型的 Observable 在訂閱之後是不需要特別取消訂閱的。另一種則是無限事件數量的 Observable 物件,像是 DOM 的事件訂閱,或是使用 RxJS 的 timer 建立運算子(Creation Operators),或是你在元件中訂閱 Router.events 等等,這些 Observable 都沒有結束的一天,因此需要實作取消訂閱(Unsubscribe),否則就可能會導致記憶體洩漏等問題。這篇文章我將分享四種不同的 RxJS 取消訂閱方法。

... 繼續閱讀 ...

如何讓 Angular CLI v8+ 建置專案時可以不要輸出 ES5 版本 (browserslist)

Angular CLI 從 v8 版本開始,就支援一個「差異化載入」(Differential Loading) 功能,此功能會自動判斷當今世上所有主流瀏覽器中,是否支援 ES5 或 ES2015 (ES6) 語法。如果這些瀏覽器還有不支援 ES2015 的版本尚在市場上流通的話,Angular CLI 在執行 ng build --prod 的時候,就會建置出分別為 ES5 與 ES2015 兩個版本,並透過 nomodule 屬性達成差異化載入。想當然爾,如果一次建置兩個版本,總體建置時間也會倍增。本篇文章我將解釋這部分技術細節,如果你只想建置出 ES2015 的版本,也請繼續看下去。

... 繼續閱讀 ...

2018 企業前端框架趨勢論壇之問答回應 (完整版)

我們今年在 2018/9/15 舉辦了一場「企業前端框架趨勢論壇」活動,現場來了將近 200 人,可見許多人對前框架的發展相當感興趣。由於是我們第一次舉辦大型活動,我發現整體活動安排得不是很理想,尤其是最後專家座談的部分,留給會眾提問的時間太少了,這點我們一定會在日後的活動中改進。本篇文章,我打算回答線上提問的所有問題,幫助大家釐清疑惑。

... 繼續閱讀 ...

在 Angular 套版時應注意「空連結」或「多層次選單」的使用

我們許多專案,都會有網頁設計師設計版型,然後再交由前端工程師套版。不過有很多版型,都會留有 <a href="#"></a> 這樣的空連結,比較常見的用途都是在「多層次選單」的上層連結。但這樣的連結,在套用至多頁面路由的 SPA 應用程式中時,就會出現問題。由於 SPA 網頁在設計的時候,都會套用 <base href="..."> 元素,設定網頁中所有連結的基礎位址 (Base URL),當使用者點擊 <a href="#"> 這樣的連結時,就會導致網頁重新整理!本篇文章將解說幾個可能的解決方案。

... 繼續閱讀 ...

發行 Angular Schematics 程式產生器與設定 .npmignore 的注意事項

昨天寫了一個小工具,可以自動將現有 Angular CLI 建立的專案,轉換成有 Hot Module Replacement (HMR) 功能的版本,只要簡單一個命令 ng add hmr-enabled 就可以搞定,非常方便。不過我在發布專案到 npm registry 的過程中,卻意外遺漏了幾個重要的檔案,原來是有檔案被 .npmignore 給忽略掉了,到了今天傍晚才修復。我們就立刻來看看這個錯誤是怎樣發生的!

... 繼續閱讀 ...

離線安裝完整 Angular 開發環境的標準作業流程 (大型企業適用)

這兩個月經常在新竹科學園區進行 Angular 企業內訓,有越來越多的企業意識到 Angular 帶來的高價值(High Value)與低總體成本(Low TCO)。不過,在高度資安的防護下,我經常需要協助學員「離線安裝」完整的 Angular 開發環境,而且必須在「無管理員身分」的權限下進行安裝。雖然我已經寫了不少相關文章,但環境設定上還是沒甚麼效率。今天這篇文章,我特地整理詳細的設定步驟,幫助大家更順利的設立 Angular 開發環境。

... 繼續閱讀 ...

Angular 結合 nginx 反向代理的 Docker 容器化封裝技巧

在微服務架構下,部署 Angular 應用程式與後端 Web API 應該切割成兩個不同的微服務。但具體的實現方式,通常會透過容器化技術來達成,實作上相對容易許多。像我們公司的特定專案,就是透過 Kubernetes 叢集化技術來實現這個目的。這篇文章,我將分享如何將 Angular 這類 SPA 框架,如何透過 nginx 反向代理與 Docker 容器化技術,徹底做到微服務化。將前後端分離的結果,可以幫助我們簡化 CI/CD 流程,同時降低系統之間的耦合性。

... 繼續閱讀 ...

如何在 Angular CLI 建立 proxy.config.json 轉發呼叫遠端 RESTful APIs

最近開辦了許多 Angular 2 訓練課程,許多學員都有提到一個問題,就是如何讓我們現有的 ASP.NET MVC 5 網站跟 Angular 2 整合在一起。這個問題有個很簡單的回答:不要在開發時期整在一起,部署的時候放在一起就好!但是 Angular 2 網站在開發的過程中要怎樣才能成功呼叫我們用 ASP.NET MVC 或 ASP.NET Web API 寫好的 RESTful API 呢?本篇文章將介紹一個鮮為人知的「內建功能」,可以讓你在開發時期就可以很方便的呼叫任意遠端任意 HTTP API 介面。

... 繼續閱讀 ...