[聚合文章] 如何在本機執行 ng build 後的結果 ?

Angular CLI 雖然可以直接 ng serve 執行 Angular，不過畢竟不是 ng build --prod 的最終結果，你曾懷疑 ng build --prod 後的結果真的能跑嗎 ? 可以先在本機測試 ng build --prod 編譯後的結果嗎 ?

Version

Node.js 8.9.3

Angular CLI 1.6.2

Angular 5.2

安裝 http-server

$ npm install -g http-server

另外安裝 http-server 執行 ng build --prod 結果，不透過 Angular CLI。

• -g : 安裝 http-server 在 global

使用 ng build --prod 編譯

~/MyProject $ ng build --prod

在專案目錄下執行 ng build --prod 。

1. 執行 ng build --prod
2. 編譯後的檔案會放在 dist 目錄下

啟動 http-server

~/MyProject/dist $ http-server

ng build --prod 會將編譯後的檔案放到 dist 目錄下，在 dist 目錄下執行 http-server 。

1. 在 dist 目錄下啟動 http-server
2. http-server 預設啟動在 http://192.168.11.4:8080

IP 並不固定，請以實際的 IP 為準

使用瀏覽器測試

Angular 不再跑在 localhost:4200 ，而是跑在 192.168.11.4:8080

Conclusion

• 只要安裝了 http-server 之後，就可以在本機測試 ng build --prod 編譯後的結果，不必再額外安裝其他 server