Angular CLI Tutorial
Angular CLI Useful Resources
Selected Reading
- Angular CLI - Code Coverage
- Angular CLI - ng xi18n
- Angular CLI - ng update
- Angular CLI - ng doc
- Angular CLI - ng config
- Angular CLI - ng analytics
- Angular CLI - ng add
- Angular CLI - ng e2e
- Angular CLI - ng test
- Angular CLI - ng lint
- Angular CLI - ng serve
- Angular CLI - ng run
- Angular CLI - ng build
- Angular CLI - ng generate
- Angular CLI - ng help
- Angular CLI - ng new
- Angular CLI - ng version
- Angular CLI - Environment Setup
- Angular CLI - Overview
- Angular CLI - Home
Angular CLI Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Angular CLI - ng serve
Angular CLI - ng serve Command
This chapter explains the syntax, argument and options of ng serve command along with an example.
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 apppcation. It rebuilds the apppcation if changes occur. Here project is the name of the apppcation 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 apppcation or a pbrary. |
Options
Options are optional parameters.
| Sr.No. | Option & Syntax | Description |
|---|---|---|
| 1 | --allowedHosts | Whitepst 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 apppcation 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 exppcitly overrides the "--prod" flag. Apases: -c |
| 7 | --deployUrl=deployUrl | URL where files will be deployed. |
| 8 | --disableHostCheck=true|false |
Don t verify connected cpents 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 psten on. Default: localhost |
| 13 | --pveReload=true|false |
Whether to reload the page on change, using pve-reload. Default: true |
| 14 | --open=true|false |
Opens the url in default browser. Default: false Apases: -o |
| 15 | --optimization=true|false | Enables optimization of the build output. |
| 16 | --poll | Enable and define the file watching poll time period in milpseconds. |
| 17 | --port |
Port to psten 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 bundpng, pmited tree-shaking, and also pmited dead code epmination. |
| 19 | --progress=true|false | Log progress to the console while building. |
| 20 | --proxyConfig=proxyConfig | Proxy configuration file. |
| 21 | --pubpcHost=pubpcHost | The URL that the browser cpent (or pve-reload cpent, 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 pbraries. |
| 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
Example
An example for ng serve command is given below −
>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 pstening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
Here ng serve command has built and serve our project TutorialsPoint successfully.Now open http://localhost:4200 in a browser window and verify the output.
Advertisements