Angular CLI - ng serve 命令

本章解釋了 ng serve 命令的語法、引數和選項，並附帶示例。

語法

ng serve 命令的語法如下：

ng serve <project> [options]
ng s <project> [options]

ng serve 命令構建並啟動應用程式。如果發生更改，它將重新構建應用程式。這裡 project 是在 angular.json 中定義的應用程式名稱。

引數

ng serve 命令的引數如下：

序號	引數 & 語法	描述
1	<project>	要構建的專案名稱。可以是應用程式或庫。

選項

選項是可選引數。

序號	選項 & 語法	描述
1	--allowedHosts	允許訪問開發伺服器的主機白名單。
2	--aot=true\|false	使用提前編譯 (Ahead of Time compilation)。
3	--baseHref=baseHref	正在構建的應用程式的基本 URL。
4	--buildEventLog=buildEventLog	實驗性功能：構建事件協議事件的輸出檔案路徑。
5	--commonChunk=true\|false	使用單獨的包包含跨多個包使用的程式碼。
6	--configuration=configuration	一個命名的構建目標，如 angular.json 的“configurations”部分中指定。每個命名目標都帶有該目標的選項預設值配置。顯式設定此項將覆蓋“--prod”標誌。別名：-c
7	--deployUrl=deployUrl	檔案將部署到的 URL。
8	--disableHostCheck=true\|false	不驗證連線的客戶端是否屬於允許的主機。預設值：false
9	--help=true\|false\|json\|JSON	在控制檯中顯示此命令的幫助訊息。預設值：false
10	--hmr=true\|false	啟用熱模組替換 (Hot Module Replacement)。預設值：false
11	--hmrWarning=true\|false	啟用 --hmr 選項時顯示警告。預設值：true
12	--host=host	要監聽的主機。預設值：localhost
13	--liveReload=true\|false	是否在更改時使用即時過載重新載入頁面。預設值：true
14	--open=true\|false	在預設瀏覽器中開啟 URL。預設值：false 別名：-o
15	--optimization=true\|false	啟用構建輸出的最佳化。
16	--poll	啟用並定義檔案監視輪詢時間段（以毫秒為單位）。
17	--port	要監聽的埠。預設值：4200
18	--prod=true\|false	“--configuration=production”的簡寫。如果為 true，則將構建配置設定為生產目標。預設情況下，生產目標在工作區配置中設定，以便所有構建都使用捆綁、有限的 tree-shaking 和有限的死程式碼消除。
19	--progress=true\|false	在構建時將進度記錄到控制檯。
20	--proxyConfig=proxyConfig	代理配置檔案。
21	--publicHost=publicHost	瀏覽器客戶端（如果啟用，則為即時過載客戶端）應用來連線到開發伺服器的 URL。用於複雜的開發伺服器設定，例如具有反向代理的設定。
22	--servePath=servePath	應用程式將被提供服務的路徑名。
23	--servePathDefaultWarning=true\|false	當 deploy-url/base-href 使用不受支援的 serve path 值時顯示警告。預設值：true
24	--sourceMap=true\|false	輸出源對映。
25	--ssl=true\|false	使用 HTTPS 提供服務。預設值：false
26	--sslCert=sslCert	用於提供 HTTPS 服務的 SSL 證書。
27	--sslKey=sslKey	用於提供 HTTPS 服務的 SSL 金鑰。
28	--vendorChunk=true\|false	使用單獨的包僅包含供應商庫。
29	--verbose=true\|false	向輸出日誌新增更多詳細資訊。
30	--watch=true\|false	更改時重新構建。預設值：true

首先移動到使用ng build命令更新的 Angular 專案，然後執行該命令。本章可在https://tutorialspoint.tw/angular_cli/angular_cli_ng_build.htm找到。

示例

下面給出了 ng serve 命令的示例：

\>Node\>TutorialsPoint> ng serve
chunk {main} main.js, main.js.map (main) 14.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-04T04:01:47.562Z - Hash: a90c5fc750c475cdc4d1 - Time: 10164ms
** Angular Live Development Server is listening on localhost:4200, open your browser on https://:4200/ **
: Compiled successfully.

這裡 ng serve 命令成功地構建並啟動了我們的 TutorialsPoint 專案。現在在瀏覽器視窗中開啟 https://:4200 並驗證輸出。

列印頁面