前陣子被同事問了 Angular Project 的專案結構建議要怎麼擺放比較有彈性!? 說實在的，從 angular v1(angularJS) ~ angular v9 (2019.12)，就是看官方的 Style guide (大概就是長那樣)，而且在開發版本提升的同時，為了因應新 feature 的加入也有可能異動。
查了別人開發架構加上自己的經驗大概是是這樣子，根據 (1)一次性？ (2) 會持續大於 30/40個 component嗎？(3)是否需多人共同維護, 是否需要其他 project dependency ? (4) 是否需要 lazy-loading ?
中小型專案 | 簡易版
如果是一次性開發，且 lazy-loading module的需求很低的狀態下。
|-- app/
|-- core/ # Core components
|-- [+] authentication/
|-- [+] services/
|-- [+] guards/
|-- [+] interceptors
|-- [+] models/
|-- users # Users Components
|-- [+] user-edit/
|-- [+] user-view/
|-- [+] user-list/
├── user.service.ts
|-- books # Books Components
|-- [+] book-edit/
|-- [+] book-view/
|-- [+] book-list/
├── book.service.ts
|-- public/ # 不需授權的 Components
|-- shared/ # 共享模組
|-- app-routing.module.ts
|-- app.module.ts
中大型專案 | 進階版
進階版的意思是當多個模組需要多人分工時強制定義些風格，有助於幫助溝通避免把Component建立在令人不解的地方。
|-- app/
| |-- modules/
| | |
|-- shared/ # 共享模組
|-- [+] components
├── [+] error-code # 錯誤碼呈現
├── [+] progress # 進度動畫呈現
├── [+] alert # 警告層級呈現
├── [+] toast # 短訊息層級呈現
├── [+] loader # 載入動畫
├── [+] server-info # 產品版本訊息
├── [+] license # 授權訊息顯示
├── [+] license-upload # 授權上傳
|-- [+] directives
├── [+] has-roles # 角色檢查
├── [+] has-permission # 權限檢查
|-- [+] enums
├── role.enum.ts # 預設角色
├── permission.default.enum.ts # 預設權限
├── permission.vender.enum.ts # 客製化權限
|-- [+] form-field
├── [+] ab-code-input # 金鑰碼表單欄位
|-- [+] pipes
├── array-filter.pipe.ts
|-- [+] models
├── server-response.model.ts # 回應
├── server-info.model.ts # 開發訊息
├── error-code.model.ts # 錯誤碼
|-- [+] utils
├── check-type.ts # 型別檢查
├── compare-type.ts # 型別比較
├── material.module.ts # angular module export
├── shared.module.ts
|
| # 核心模組
|-- core/
|-- [+] authentication/
├── auth.service.ts # auth-process
|-- [+] services/
├── logger.service.ts
├── app.service.ts
├── app-agent.service.ts
├── app-token.service.ts
├── setting.service.ts
|-- [+] guards/
├── auth.guard.ts
├── unauth.guard.ts
├── permissions.guard.ts
|-- [+] interceptors
├── http.token.default.interceptor.ts
├── error-handler.interceptor.ts
|-- [+] models/
│ ├── index.ts
│ ├── app.models.ts
│ ├── app-permissions.models.ts
│ ├── app-tokens.models.ts
│ ├── app-agent.models.ts
│ ├── settings.models.ts
|-- [+] header
|-- [+] footer
|-- core.module.ts
|-- core-module-loadedonce.guard.ts # 檢查載入 1 次
|-- index.ts
|
| # Home 模組 (public)
|-- home
|-- [+] components/ # CAN'T be routed to
|-- [+] pages/ # CAN be routed to, Routed components
├── [+] about
├── about.page.ts|html|scss|
├── [+] contactus
├── contact-us.page.ts|html|scss|
├── [+] faq
├── faq.page.ts |html|scss|
├── [+] sign-in
├── sign-in.page.ts|html|scss|
|-- home-routing.module.ts
|-- home.module.ts
|
| # Users 使用者模組 (private)
|-- users
|-- [+] services/
│ ├── logger.service.ts
│ ├── user.service.ts
│ ├── role.service.ts
|-- [+] enums/
│ ├── index.ts
│ ├── default-permissions.enum.ts
│ ├── accounts.enum.ts
|-- [+] models/
│ ├── index.ts
│ ├── user.model.ts
│ ├── role.model.ts
│ ├── role-permissions.models.ts
|-- [+] components/ # CAN'T be routed to
|-- [+] pages/ # CAN be routed to, Routed components
|-- users-routing.module.ts
|-- users.module.ts
| # xxxx 模組 (private)
|-- xxxx
|-- [+] services/
|-- [+] enums/
|-- [+] models/
|-- [+] components/ # CAN'T be routed to
|-- [+] pages/ # CAN be routed to, Routed components
|-- xxxx-routing.module.ts
|-- xxxx.module.ts