「我都裝好了！！接下來可以開始 Coding 了嗎？！」Wayne 把環境跟編輯器都安裝完之後，興奮地說。

「別急，你先開啟剛剛用 Angular CLI 建立的 HelloAngular 資料夾。」我笑而不語地說。

「哇！居然有這麼多檔案阿？！這些檔案都是要幹嘛的？」Wayne 打開資料夾之後，看到裡面居然已經產生了這麼多檔案有點驚訝地說。

「你看，都還沒搞清楚架構就想 Coding？！我跟你說...」

專案資料夾之結構說明

打開用 Angular CLI 所建立出來得專案資料夾時，應該會看到如上圖所示之結構。說明如下：

• .editorconfig - 這個檔案可以幫助開發人員在不同的編輯器和 IDE 之間更容易定義與維護一致的編碼樣式。（官方文件、EditorConfig 快速使用指南）

• .git - Git 版本控制用的資料夾，Angular CLI 建立出來的專案，預設會加入版控。如果建立專案的時候不想要加入版控，可以加上 --skip-git 的參數來讓 CLI 不要將此專案加入版控。例如：ng new SampleProject --skip-git 。

• .gitignore - Git 版本控制用的忽略設定檔。值得一提的是，就算在建立專案時加入 --skip-git 參數，此檔案也會被創建出來。

• angular.json - Angular CLI 的設定檔。詳細說明可以參考 CK's Notepad 的 [Angular] Angular CLI - angular.json 檔說明，也可以參考隔壁棚 Angular 大師之路 的說明，都滿詳細的！

• dist/ - 編譯且打包過後的程式碼會放在這裡。一開始其實並不會看到此資料夾，是我為了介紹結構的關係，才先下指令讓其出現。

• e2e/ - E2E 測試 （End-to-End Testing） 的程式碼要擺放的位置。E2E 測試是使用程式來模擬實際使用者的操作來進行的一種測試方式。Angular 在 E2E 測試方面是使用自己特製的工具 Protractor。Angular CLI 在建立專案時也會連帶建立範例，有興趣的朋友可以自己玩玩看，後面如果我想不出要寫什麼篇幅夠的話，我再來分享怎麼寫 E2E 測試。

• node_modules/ - 此專案所有依賴的套件經由使用 npm install 安裝後，都會擺放到這裡。說到這，或許你會覺得奇怪，我又沒有打過這個指令，為什麼會有這個資料夾？！其實 Angular CLI 在建立這個專案的時候，一併幫你處理好了。

• package-lock.json - 這個檔案是當我們使用 npm install 安裝套件時所產生的文件，用以記錄當前實際安裝的套件的來源與版號。比較需要注意的地方可以點我參考，但我們目前安裝的 npm 版本已經不會有這個問題，請安心將其加入版控。

• package.json - 這個檔案是用來定義我們這一包阿哩阿紮的東西是什麼的說明文件，像是應用程式的名稱、版本、描述、關鍵字、授權、貢獻者、維護者、腳本、相依的相關套件及其版本資訊等等，詳細請參考官方文件的說明。

• README.md - 這個檔案是這個專案的說明文件，採用 Markdown 的語法。可以自由撰寫關於此專案的任何說明。

• src/ - 主要在開發的所有程式碼都會放在這裡。

• tsconfig.json - 這個檔案是 TypeScript 編譯時看的編譯設定檔。由於 Angular 預設是使用 TypeScript 來開發，所以當然少不了 TypeScript 需要的相關設定檔囉！想知道更詳細的內容請點我參考。

• tslint.json - 這個檔案是 TSLint 的設定檔。TSLint 是 TypeScript 的格式驗證工具，它可以檢查你寫出來的 TypeScript 的格式是不是具有可讀性、可維護性和功能性錯誤。

以上大多數檔案都是跟「設定」有關，初期我們不太會去修改到這些設定，頂多會在 package.json 檔裡修改或新增腳本，或是調整 angular.json 檔裡的某些設定。至於其他的設定，就再自己慢慢研究囉！

src/ 之結構說明

至於在主要開發用的 src/ 底下：

• app/ - 整個網頁應用程式的 Module、Component、Service 等等都放在這。其實整個專案除了 E2E 測試的程式碼之外，大概有九成九都是放這裡。

• assets/ - 靜態資源放置處，如圖片。

• browserslist - 檔案內其實有說明，大意就是 Angular 的編譯器會根據此檔案的設定來加上 CSS 的前綴，如果要支援 IE 9-11，記得要取消此檔案最後一行的註解。

browserslist 後來有調整檔案內容，如果讀者有發現檔案內容與敘述不一樣的話，請參考留言區 SuperMike 的留言。

• environments/ - 環境變數設定檔放置處。建立專案時其實就有一併建立兩個檔案，environment.ts 與 environment.prod.ts。全系統的環境相關變數都請在這兩個檔案裡設定。

• favicon.ico - 瀏覽器的網址列、書籤、頁籤上都會用到的小 icon 圖檔。

• index.html - 整個網頁應用程式的首頁與根頁面，也是 SPA 唯一的那一頁。

• karma.conf.js - Karma 的設定檔。Karma 是一套單元測試工具，是以 Jasmine 測試為基礎，並會透過偵測我們的程式碼變更並進行測試。Angular CLI 在建立專案時，預設會使用此套工具。也用有人會改為使用其他工具如：Jest、Mocha 來進行測試。

• main.ts - Angular CLI 在編譯與打包的時候，把這支檔案裡的程式，當做整個網頁應用程式的主要程式進入點。一般也是不會去動到這裡的程式碼。

• polyfills.ts - 這個檔案滿重要的，檔案內有說明。大意是指這個檔案主要是在載入 Angular 的程式之前，會預先載入的程式。裡面也有一些是如果需要支援較低版本的瀏覽器時，需要取消註解的程式。

• styles.css - 整個網頁應用程式共用的樣式設定檔。

• test.ts - 跟 main.ts 檔類似，不過主要是用在測試檔上。

• tsconfig.app.json - 跟外層的 tsconfig.app.json 用途類似，在這個檔案裡也會看到有繼承外層的 tsconfig.app.json 的設定。

• tsconfig.spec.json - 跟 tsconfig.app.json 用途類似，不過主要是針對測試檔。

• tslint.json - 跟外層的 tslint.json 用途類似。

雖然跟 Angular 的專案初見面時，會有點好像很複雜的感覺。但隨著一層層地抽絲剝繭，希望可以讓大家對於 Angular 的專案結構有更進一步的了解，令大家在使用 Angular 時，能夠更知道 Angular 的各檔案的用意與用途。

錯誤更新記錄

• 2019/05/28 11:30 - 非常感謝邦友 SuperMike 的提醒，增加 browserslist 的補充說明。