[Angular #3]認識 Angular CLI 產生的專案目錄結構
Published in
7 min readJun 16, 2019
前一篇文章中，我們透過 Angular CLI 的方式( 使用 ng new 指令)，快速容易的建立一個新的專案，並且擁有一致性的專案架構；專案頂層包含本專案設定檔案、根應用設定檔案以及一些包含根應用原始檔和測試檔案子資料夾。
ng new my-app (new 名 n)
[小提醒] my-app 為專案名稱，可自行命名
[重要] 應用/主程式檔案( src/ )
src/內包含所有專案主要開發的原始程式碼，以及透過 Angular CLI 所產生的檔案，都會存放在這個目錄下。
app/— 放置整個網頁開發中，所需要的程式邏輯、資料、樣式、測試，以及 Angular 的元件(Component)、模版(Template)、模組(Module)、服務(Service)。app/app-routing.module.ts— 設定 Router(路由器)；指當瀏覽器的 URL 發生變化時，Router(路由器)會依據查詢到的對應 Route(路由)來決定顯示哪個元件。app/app.component.css— 根元件 AppComponent 的樣式檔(CSS)。app/app.component.html— 根元件 AppComponent 的 HTML 範本檔。app/app.component.spec.ts— 根元件 AppComponent 的單元測試定義檔。app/app.component.ts— 根元件 AppComponent 的主程式。app/app.module.ts— AppModule 的根模組，為應用程式的 NgModule 定義檔； 每當你於專案中，新增元件(Component)時，該檔案將會自動新增宣告該項元件(Component)。assets/— 放置網站影像和靜態資源檔案(Image、CSS、Fonts...)。environments/— 放置環境變數的設定檔；專案建立時，預設會有一個無名的標準開發環境(environments.ts)和一個生產(“prod”)環境(environments.prod.ts)。environments/environments.ts— 標準開發環境變數設定檔(production：false。environments/environments.ts— 生產環境變數設定檔(production：true)。favicon.ico— 出現在瀏覽器網址列、書籤、頁籤的小 icon 圖檔。index.html— 預設為網站首頁，也是 SPA 唯一一頁。main.ts—整個網頁應用程式的主要切入點，用於 Angular CLI 編譯與打包時。polyfills.ts— 為瀏覽器支援提供了膩子（polyfill）指令碼，載入 Angular 程式之前，會預先加載完成。style.css— 整個網站共用的 CSS 樣式檔。test.ts— 單元測試的主入口點；通常不需要編輯這個檔案。
[重要]專案設定檔案 — 1
src/— 專案主要開發的所有程式碼，以及透過 Angular CLI 所產生的檔案，都會存放在這個目錄下。package.json— [重要]設定專案所需的 npm 套件依賴，主要存放相關套件及應用程式的資訊；如應用程式名稱、版本等。 詳細請參閱 npm官方文件。
[小知識] package.json 檔案中，dependencies 與 devDependencies 的區別
dependencies 內列出的插件，是執行應用程式時所必備的；如專案項目需要依賴 jQuery，需將其寫入 dependencies 中，當專案完成時進行打包，才會一併打包進專案文件中。devDependencies 內列出的插件，只用於本機開發環境；比如 glup、webpack 構建工具或是 karma 單元測試工具，這些都只有在開發中才會使用。
以上是我們在 Angular 專案開發中，比較「重要」或是「常用」到的檔案，請務必要記得；至於下面「專案設定檔案 — 2」是方便大家更加深入了解 Angular 的各檔案用途，如果覺得多也可以暫時忽略！
專案設定檔案 — 2
.git— Git 版本控制；在 Angular CLI 建立新專案，預設會自動產生。
[指令補充] 建立新專案時，不想加入 Git 版本控制：
ng new my-app --skip-git (--skip-git 別名 -sg)node_modules/— 本專案所使用的套件，並使用 npm install 安裝的相關檔案，所放置的位置；在 Angular CLI 建立新專案時，會自動產生。
[指令補充] 建立新專案時，不加入 npm 套件依賴(不執行任何 npm/yarn 安裝指令)：
ng new my-app --skip-install (--skip-install 別名 -si).editorconfig— 幫助開發者在不同的編輯器和 IDE 之間定義和維護一致的編碼樣式。詳情請參閱 EditorConfig 官網。angular.json— Angular CLI 設定檔，包括 Angular CLI 要用到的建構、啟動開發伺服器和測試工具的設定。詳情請參閱 Angular 官網、 Mike 的 Angular 大師之路說明。browserslist— 設定各種前端工具之間共享的目標瀏覽器和 Node.js 版本； Angular 的編譯器，會依照此檔案所設定的，將 CSS 與 JavaScript 編譯成可支援指定瀏覽器的內容。 詳情請參閱 GitHub 上的瀏覽器列表。
[小知識] 如欲，專案支援 IE 9-11
請在 browserslist 檔案內，刪除下列句子中的 not
刪除前
not IE 9-11 # For IE 9-11 support, remove 'not'.刪除後
IE 9-11 # For IE 9-11 support, remove 'not'.「#」後面的文字為註解，可保留或刪除
[指令補充] 進行單元的測試：
ng test (test 別名 t)package-lock.json—使用 npm install 安裝套件到/node_modules時，所產生的套件版本資訊。 詳細請參閱 npm 官方文件；若你使用的是 yarn ，則檔案為 yarn.lock 。README.md— 本專案的說明文件。tsconfig.app.json— 專案的 TypeScript 設定，包括 TypeScript 和 Angular 範本編譯器的選項。tsconfig.json— 專案預設的 TypeScript 設定。詳細請參閱 Angular 官網 TypeScript 設定。tsconfig.spec.json— 專案測試的 TypeScript 設定。詳細請參閱 Angular 官網 TypeScript 設定。tslint.json— 專案預設的 TSLint 設定。
E2E 測試檔案
e2e/— E2E 測試(End-to-end Testing)資料夾；存放 E2E 測試原始檔，以及測試專屬的設定檔案。Angular 是使用 Protractor 來進行 E2E 測試， 測試相關之設定，存放於該目錄之下的protractor.conf.js檔案。
[指令補充] 進行 end to end 測試：
ng e2e (e2e 別名 e)
