Angular CLI − ng serve Command

Quiz

This chapter will discuss the Angular CLI ng serve command, including its uses, syntax, arguments, options, and an example, which demonstrates how to use this command in an Angular application.

The "ng serve" Command

The Angular CLI (Command Line Interface) provides a command named ng serve, which is standard for an Angular application. This command can be used only when the CLI is installed in your Angular project.

This command can commonly be seen in your package.json file, which is automatically added when creating a new Angular project using CLI commands.

You can see in the code below that the ng serve command is available in the scripts section under start:

"name": "my-app",
"version": "0.0.0",
"scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "watch": "ng build --watch --configuration development",
   "test": "ng test",
   "serve:ssr:myApp": "node dist/my-app/server/server.mjs"
}

Why use "ng serve" Command?

The ng serve command is specific to "Angular" applications. It is used to start your application on a "development server", allowing you to view and test your Angular app in the browser while it automatically rebuilds as you make any changes in your project.

Syntax

Following is the syntax of the Angular CLI ng serve command −

ng serve ng[project] ng[options]

Here,

ng serve: Command itself to start the Angular development server.
project (optional): If you are working in a multi-project workspace, you can specify the project name to serve a particular project.
options (optional): Optional flags or parameters you can include to customize the behavior of the server.

Note! You can also use its short form to run the application as ng s command, where 's' stands for 'serve'.

Arguments

The argument for the ng serve command is as follows −

Sr.No.	Argument & Description
1	The name of the project to build. This can be either an application or a library within the Angular workspace.

Note!The argument is optional in the context of ng serve command, but when provided, it allows you to specify which project (in case there are multiple projects within the Angular workspace) you want to serve.

Options

Options are "optional parameters" that can be used to customize the behavior of the ng serve command. Below is a list of options (or flags) that can be used with this command −

Sr.No.	Options & Descriptions
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 default browser. Default: false Aliases: -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

Example

In the following example, we will use the ng serve command to start our Angular application on the development server with the default port 4200 −

First go to your project directory using the following command:

cd project_directory

Run the following command to start your application:

ng serve

Once the above command is executed successfully, you will be able to see the below message:

Browser bundles
Initial chunk files     | Names               |  Raw size
polyfills.js            | polyfills           |  88.09 kB | 
main.js                 | main                |   3.13 kB | 
styles.css              | styles              |  95 bytes | 

                        | Initial total       |  91.31 kB


Server bundles
Initial chunk files     | Names               |  Raw size
chunk-F6E4YKP4.mjs      | -                   |   1.70 MB | 
polyfills.server.mjs    | polyfills.server    | 559.49 kB | 
main.server.mjs         | main.server         | 197.06 kB | 
chunk-VPSODEBW.mjs      | -                   |   2.51 kB | 
render-utils.server.mjs | render-utils.server | 423 bytes | 

Lazy chunk files        | Names               |  Raw size
chunk-P3UOPGAK.mjs      | xhr2                |  39.09 kB | 

Application bundle generation complete. [4.555 seconds]

Watch mode enabled. Watching for file changes...
  âžœ  Local:   http://localhost:4200/
  âžœ  press h + enter to show help

Now, press Ctrl and click on the http://localhost:4200/ link, or open your browser, manually and type the same URL to see your application.

The application will look like this:

Let's use few options with this commad to know their uses:

Using "--open" option

The --open option (flag) is used to automatically open your application in the default web browser when the development server starts.

Here is the complete command:

ng serve --open

Changing port using "--port" option

The --port option allows you to specify a different port for the Angular application to run on, instead of the default port 4200.

Following is the command:

ng serve --port 8080

Once you run the above command, you will see that the application is running on port 8080, which is set using the --port option:

Print Page