我們開發 Angular 到現在，都是用 Angular-CLI 提供的 ng serve 來開測試伺服器。那麼當網站寫好後，要發布到遠端的 server 或是 repository，通常會進行部署，那我們今天來示範怎麼部署，並把網站放到 server 裡。

安裝 XAMPP

請到這裡下載並安裝 XAMPP。XAMPP 整合了 Apache、MySQL、FTP...等等的伺服器功能，我們等等會將檔案放到 XAMPP 裡執行。

安裝好後找到 XAMPP 的資料夾：

裡面有很多檔案，我們等等要把網站放在 htdocs 中，裡面目前有一些範例的頁面，全部刪掉即可。

在同一層資料夾找到 xampp-control.exe，點兩下執行，在 Apache 那欄點 Start 就可以開啟網頁伺服器了。

部署 Angular

回到 Angular，來準備我們要放在網站上的檔案，透過 Angular-CLI下指令：

ng build --prod

這邊的 --prod 是開啟 production Mode，在很久以前的文章有提過，production Mode 除了幫我們編譯程式碼、打包，也會將程式碼壓縮，這樣在網頁載入上，效能會比較好。

執行完 ng build --prod 後，我們的專案資料夾底下會多一個 dist 資料夾：

裡面就是放我們剛剛打包好的程式碼：

可以看到我們寫的 Component、Service，都已經被打包在幾個 js 檔裡。

接下來把這些檔案，全部複製到 xampp\htdocs 底下：

確認 Apache 已經被啟動：

然後打開瀏覽器，輸入 localhost 或 127.0.0.1，應該就能成功開啟網站。