Angular 專案檔案結構
當我們成功啟動一個 Angular 專案後，會得到上圖的資料夾結構，以下就一一說明（下面的順序會依據 vscode 上排列，可以對照著看比較方便哦）
e2e/：E2E 測試（End-to-End）的程式碼要擺放的位置這邊就不詳述。
補充資料：[一次搞懂單元測試、整合測試、端對端測試之間的差異]node_modules/：此專案相關依賴的套件。src/：開發中所有程式碼、資源全部都在這裡。- 🌟
src/app：包含整個網頁應用程式的 Module、Component、Service。 - 🌟
src/assets：靜態資源資料夾。例如：圖片、多語系 json 檔等。 src/environments：環境變數設定檔資料夾。在實際開發時，會有許多環境變數（API Url、）會因為專案情境（內部測試機、客戶測試機、正式機）而有所不同。此資料夾一開始會包含兩個檔案：
-environment.ts：提供引用時的 import 基底檔案
-environment.prod.ts：預設提供給正式環境用的檔案
[補充資料]1. [Angular #7 Environments Switch]2. [Angular] 環境檔使用方式
src/favicon.ico：瀏覽器的頁籤會出現的小 icon。src/index.html：整個網頁應用程式的首頁與 root 頁面，也是 SPA 唯一的 HTMLsrc/main.ts：主程式入口點，通常不會動到此檔案。src/polyfills.ts：與瀏覽器支援度有關的設定檔案。當應用程式需同時符合 IE 或舊版的瀏覽器時，會使用 Polyfill 來填充缺少的 HTML5/ JS APIs。src/styles.css：整個網頁應用程式共用的樣式檔。src/test.ts：類似 `main.ts` 不過是用在測試檔案上，通常不會動到此檔案。
🌟 src/app 底下根元件模組
Angular 建立的根元件模組
- 🌟
app-routing.module.ts：根元件模組路由定義檔。 app.component.html：根元件模組範本檔。app.component.scss：根元件模組樣式檔。app.component.spect.ts：根元件模組單元測試定義檔。- 🌟
app.component.ts：根元件模組主程式。 - 🌟
app.module.ts：應用程式的 NgModule 定義檔（要匯入的模組、元件等）。
與設定相關的檔案
.browserslistrc：與瀏覽器支援度有關的設定檔案。這隻設定檔會調整以下部分：
- css 自動前綴（Autoprefixer）。
- Babel 支援度。
- PostCSS Preset Env 支援度。
- obsolete-webpack-plugin 支援度。
.editorconfig：定義編碼樣式。
[補充資料]1. 官方文件2. EditorConfig 快速使用指南
.gitignore：設定 Git 版本控制要忽略哪些檔案，不進入版控- 🌟
angular.json：Angular CLI 設定檔，詳細設定可參考 [Angular 大師之路] Day 02 — 更加理解 Angular CLI 之 Monorepo 應用。 .karma.conf.js：Angular 內建的單元測試工具設定檔（官方文件）package-lock.json：紀錄實際安裝的套件來源及版本號package.json：一個應用程式所有資訊，包含：應用程式名稱、版本、相依的相關套件、腳本等等，通常我們要了解一個專案時，第一步就是來看這個檔案。README.md：專案說明文件，是以 Markdown 的語法來撰寫。tsconfig.app.json：TypeScript 設定檔，繼承了tsconfig.json的設定，可參考 TypeScript 設定。tsconfig.json：TypeScript 設定檔，其他與 TypeScript 相關的設定檔都會繼承這個基本設定。tsconfig.spec.json：「測試」時使用到的 TypeScript 設定檔。tslint.json：TSLint 設定檔，可參考 TSLint 設定。
在一開始學習時，看到這麼多檔案其實心裡蠻慌的，太多不懂的名詞與套件，但其實大部分的檔案都跟設定有關，起初只需要有基本的概念即可，使用 Angular 到現在，主要都是更動文章中打星號的檔案，因此都等到需要用到時再深入研究。
