Angular Npm套件整理

※ 安裝套件時請用 Angualr CLI 進行，這樣可以順便設定 angular.json 等相關組態。

安裝 Angular CLI

npm install -g @angular/cli
ng --version  # 查詢版號

安裝 PWA

包含 manifest 及 service worker 等。

ng add @angular/pwa

§ CSS Framework

Angular Material

Material Design components for Angular 官方認可的 CSS Framewok。

@angular-bulma

Angular directives and components to use in your Bulma projects 留參備用。

Bulma

Bulma is a modern CSS framework based on Flexbox.

為 pure CSS 前端 CSS Famework。 留參備用。

---

§ Swagger 工具

ng-openapi-gen

An OpenAPI 3 code generator for Angular. 前身是 ng-swagger-gen 成員相同。

自動生成 api client for swagger。也支援檔案上下傳。

已應用。

---

§ 背景工作/權控管制

@ng-idle/core & @ng-idle/keepalive

A module for responding to idle users in Angular applications. This is a rewrite of the ng-idle module;

@ng-idle 在背景偵測是否介面已閒置，應用於當介面閒置過久(如5分鐘)在提示10秒後自動登出。

@ng-idle/keepalive 典型應用在背景執行 long pulling 確保當前授權仍有效。即在多頁面的 web app 應用情境中使用者登出其中一個頁面其它頁面就需自動登出。

How to Implement Idle Timeout in AngularMedium

參考文章: ng-idle & keepalive

---

§ 工具組/Utilities

file-saver

用於 browser 檔案下載後存檔。

也有像 ngx-filesaver 包裝成 angualr service 不過沒有比較好用。

已應用。

---

§ Animiation

@angular/animations