[從 0 開始的 Angular 生活]No.9 將靜態檔案加入 Angular CLI 建立的專案

前言

現在有個狀況是，如果我們有一份靜態網頁的版型或者是一些靜態的圖片資源、 json 檔，那麼要如何地加入到 Angular 專案內呢？

將靜態檔案加入 src 資料夾

首先我有一份靜態網頁的版型叫做 BlogSiteHtml ，解壓縮後的內容有：

• api 資料夾
• assets 資料夾
• blog-index 網頁版型

接著把這些檔案全部貼到 Angular 專案的 src 資料夾內，並且輸入指令 npm start 重啟開發伺服器。

這樣就完成了嗎？

重啟開發伺服器後，我們可以在網址列輸入

http://localhost:4200/blog-index.html

會發現什麼事情都沒發生，畫面還是原本那樣。

為什麼？

因為當我們把這些新的靜態檔案加入到 src 目錄後，還需要設定 angular.json ，告訴這支檔案我們做了什麼異動。

angular.json 的設定

進入到這支檔案後，可以看到非常多密密麻麻的設定，而我們這次要修改的是 assets 區塊的內容，而它位於 architect 物件下的 build 物件下的 options 物件內。

修改前

"assets": [
  "src/favicon.ico",
  "src/assets"
],

修改的目的就是要告訴這支檔案我們在 src 資料夾內增加了什麼東西，希望它一起編譯。

修改如下：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/api",
  "src/blog-index.html"
],

接著再度重啟開發伺服器，並且重新輸入對應網址觀察。

這次就成功地看到一個漂亮的部落格版型囉。

小結

透過這樣的操作得知，如果未來開發時加入了一些新的靜態資源，除了將檔案複製進 src 外，也必須調整相關的設定檔，使其可以對應，這樣才能找到我們要的檔案哦。