Angular CLI - ng serve Command | Adglob Infosystem Pvt Ltd

In this Angular CLI ng serve Command chapter explains the syntax, argument and options of ng serve command along with an example. So all the details of Angular CLI ng serve Command listed below-

Syntax

The syntax for ng serve command is as follows −

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

ng serve command builds and serve the application. It rebuilds the application if changes occur. Here project is the name of the application as defined in angular.json.

Arguments

The argument for ng serve command is as follows −

Sr.No.	Argument & Syntax	Description
1	<project>	The name of the project to build. Can be an application or a library.

Options

Options are optional parameters.

Sr.No.	Option & Syntax	Description
1	–allowedHosts	Whitelist of hosts that are allowed to access the dev server.
2	–aot=true\|false	Build using Ahead of Time compilation.
3	–baseHref=baseHref	Base url for the application being built.
4	–buildEventLog=buildEventLog	EXPERIMENTAL Output file path for Build Event Protocol events
5	–commonChunk=true\|false	Use a separate bundle containing code used across multiple bundles.
6	–configuration=configuration	A named build target, as specified in the “configurations” section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the “–prod” flag.Aliases: -c
7	–deployUrl=deployUrl	URL where files will be deployed.
8	–disableHostCheck=true\|false	Don’t verify connected clients are part of allowed hosts.Default: false
9	–help=true\|false\|json\|JSON	Shows a help message for this command in the console.Default: false
10	–hmr=true\|false	Enable hot module replacement.Default: false
11	–hmrWarning=true\|false	Show a warning when the –hmr option is enabled.Default: true
12	–host=host	Host to listen on.Default: localhost
13	–liveReload=true\|false	Whether to reload the page on change, using live-reload.Default: true
14	–open=true\|false	Opens the URL in the default browser.Default: falseAliases: -o
15	–optimization=true\|false	Enables optimization of the build output.
16	–poll	Enable and define the file watching poll time period in milliseconds.
17	–port	Port to listen on. Default: 4200
18	–prod=true\|false	Shorthand for “–configuration=production”. When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.
19	–progress=true\|false	Log progress to the console while building.
20	–proxyConfig=proxyConfig	Proxy configuration file.
21	–publicHost=publicHost	The URL that the browser client (or live-reload client, if enabled) should use to connect to the development server. Use for a complex dev server setup, such as one with reverse proxies.
22	–servePath=servePath	The pathname where the app will be served.
23	–servePathDefaultWarning=true\|false	Show a warning when deploy-URL/base-href use unsupported serve path values. Default: true
24	–sourceMap=true\|false	Output sourcemaps.
25	–ssl=true\|false	Serve using HTTPS.Default: false
26	–sslCert=sslCert	SSL certificate to use for serving HTTPS.
27	–sslKey=sslKey	SSL key to use for serving HTTPS.
28	–vendorChunk=true\|false	Use a separate bundle containing only vendor libraries.
29	–verbose=true\|false	Adds more details to output logging.
30	–watch=true\|false	Rebuild on change. Default: true

First, move to an angular project updated using ng build command and then run the command.The chapter is available at https://adglob.in/blog/angular-cli-ng-build-command/.

Example

An example for ng serve command is given below −

\>Node\>Adglob> 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 http://localhost:4200/ **
: Compiled successfully.

Here ng serve command has built and serve our project Adglob successfully.Now open http://localhost:4200 in a browser window and verify the output.

Next Topic : Click Here