Angular 7 CLI Commands

Go back to Tutorial

ng serve

ng serve builds the application and starts a web server.

ng serve [project]

Options

prod – Flag to set configuration to “prod”. The syntax is: -prod
configuration – Specify the configuration to use. The syntax is: –configuration (alias: -c)
browser-target – Target to serve. The syntax is: –browser-target
port – Port to listen on. The syntax is: –port
host – Host to listen on. The syntax is: –host
proxy-config – Proxy configuration file. The syntax is: –proxy-config
ssl – Serve using HTTPS. The syntax is: –ssl
ssl-key – SSL key to use for serving HTTPS. The syntax is: –ssl-key
ssl-cert – SSL certificate to use for serving HTTPS. The syntax is: –ssl-cert
open – Opens the url in default browser. The syntax is: –open (alias: -o)
live-reload – Whether to reload the page on change, using live-reload. The syntax is: –live-reload
public-host – Specify the URL that the browser client will use. The syntax is: –public-host
serve-path – The pathname where the app will be served. The syntax is: –serve-path
disable-host-check – Don’t verify connected clients are part of allowed hosts. The syntax is:
–disable-host-check
hmr – Enable hot module replacement. The syntax is: –hmr
watch – Rebuild on change. The syntax is: –watch
hmr-warning – Show a warning when the –hmr option is enabled. The syntax is: –hmr-warning
serve-path-default-warning – Show a warning when deploy-url/base-href use unsupported serve path values. The syntax is: –serve-path-default-warning
optimization – Enables optimization of the build output. The syntax is: –optimization
aot – Build using Ahead of Time compilation. The syntax is: –aot
source-map – Output sourcemaps. The syntax is: –source-map
eval-source-map – Output in-file eval sourcemaps. The syntax is: –eval-source-map
vendor-source-map – Resolve vendor packages sourcemaps. The syntax is: –vendor-source-map
vendor-chunk – Use a separate bundle containing only vendor libraries. The syntax is: –vendor-chunk
common-chunk – Use a separate bundle containing code used across multiple bundles. The syntax is: –common-chunk
base-href – Base url for the application being built. The syntax is: –base-href
deploy-url – URL where files will be deployed. The syntax is: –deploy-url
verbose – Adds more details to output logging. The syntax is: –verbose
progress – Log progress to the console while building. The syntax is: –progress

ng generate

ng generate [name] generates the specified schematic

Alias

g – ng g [name]

Available Schematics:

class
component
directive
enum
guard
interface
module
pipe
service
appShell
application
library
universal

Options

dry-run – Run through without making any changes. The syntax is: –dry-run (alias: -d)
force – Forces overwriting of files. The syntax is: –force (alias: -f)

ng lint

ng lint will lint you app code using tslint. The syntax is: ng lint [project]

Options

configuration – Specify the configuration to use. The syntax is: –configuration (alias: -c)
tslint-config – The name of the TSLint configuration file. The syntax is: –tslint-config
fix- Fixes linting errors (may overwrite linted files). The syntax is: –fix
type-check – Controls the type check for linting. The syntax is: –type-check
force- Succeeds even if there was linting errors. The syntax is: –force
silent- Show output text. The syntax is: –silent
format – The syntax is: –format

Output format (prose, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist, codeFrame).

ng test

ng test compiles the application into an output directory

Run unit tests by command

ng test

Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via –watch=false.

You can run tests with coverage via –code-coverage. The coverage report will be in the coverage/ directory.

Options

prod – Flag to set configuration to “prod”. The syntax is: –prod
configuration – Specify the configuration to use. The syntax is: –configuration (alias: -c)
main – The name of the main entry-point file. The syntax is: –main
ts-config – The name of the TypeScript configuration file. The syntax is: –ts-config
karma-config – The name of the Karma configuration file. The syntax is: –karma-config
polyfills – The name of the polyfills file. The syntax is: –polyfills
environment- Defines the build environment. The syntax is: –environment
source-map – Output sourcemaps. The syntax is: –source-map
progress – Log progress to the console while building. The syntax is: –progress
watch – Run build when files change. The syntax is: –watch
poll – Enable and define the file watching poll time period in milliseconds. The syntax is: –poll
preserve-symlinks – Do not use the real path when resolving modules. The syntax is: –preserve-symlinks
browsers – Override which browsers tests are run against. The syntax is: –browsers
code-coverage – Output a code coverage report. The syntax is: –code-coverage

ng e2e

ng e2e serves the application and runs end-to-end tests.

ng e2e [project]

TO run end-to-end tests, use command

ng e2e

End-to-end tests are run via Protractor.

Options

prod – Flag to set configuration to “prod”. The syntax is: –prod
configuration – Specify the configuration to use. The syntax is: –configuration (alias: -c)
protractor-config – The name of the Protractor configuration file. The syntax is: –protractor-config
dev-server-target – Dev server target to run tests against. The syntax is: –dev-server-target
suite – Override suite in the protractor config. The syntax is: –suite
element-explorer – Start Protractor’s Element Explorer for debugging. The syntax is: –element-explorer
webdriver-update – Try to update webdriver. The syntax is: –webdriver-update
serve – Compile and Serve the app. The syntax is: –serve
port – The port to use to serve the application. The syntax is: –port
host – Host to listen on. The syntax is: –host
base-url – Base URL for protractor to connect to. The syntax is: –base-url

ng build

ng build compiles the application into an output directory.

ng build [project]

Creating a build

ng build

The build artifacts will be stored in the dist/ directory.

All commands that build or serve your project, ng build/serve/e2e, will delete the output directory (dist/ by default). This can be disabled via the –delete-output-path=false option.

Base tag handling in index.html – When building you can modify base tag (<base href=”/”>) in your index.html with –base-href your-url option.

# Sets base tag href to /myUrl/ in your index.html

ng build –base-href /myUrl/

Bundling & Tree-Shaking – All builds make use of bundling and limited tree-shaking, while –prod builds also run limited dead code elimination via UglifyJS.

–build-optimizer and –vendor-chunk

When using Build Optimizer the vendor chunk will be disabled by default. You can override this with –vendor-chunk=true.

Total bundle sizes with Build Optimizer are smaller if there is no separate vendor chunk because having vendor code in the same chunk as app code makes it possible for Uglify to remove more unused code.

CSS resources – Resources in CSS, such as images and fonts, will be copied over automatically as part of a build. If a resource is less than 10kb it will also be inlined. You’ll see these resources be outputted and fingerprinted at the root of dist/.

ES2015 support – To build in ES2015 mode, edit ./tsconfig.json to use “target”: “es2015” (instead of es5). This will cause application TypeScript and Uglify be output as ES2015, and third party libraries to be loaded through the es2015 entry in package.json if available.

Options

prod
configuration
main
polyfills
ts-config
optimization
output-path
aot
source-map
eval-source-map
vendor-source-map
vendor-chunk
common-chunk
base-href
deploy-url
verbose
progress
i18n-file
i18n-format
i18n-locale
i18n-missing-translation
extract-css
watch
output-hashing
poll
delete-output-path
preserve-symlinks
extract-licenses
show-circular-dependencies
build-optimizer
named-chunks
subresource-integrity
service-worker
ngsw-config-path
skip-app-shell
index
stats-json
fork-type-checker

ng config

ng config [key] [value] Get/set configuration values. [key] should be in JSON path format. Example: a[3].foo.bar[2]. If only the [key] is provided it will get the value. If both the [key] and [value] are provided it will set the value.

Options

global – Get/set the value in the global configuration (in your home directory). The syntax is: –global (alias: -g)

ng doc

ng doc [search term] Opens the official Angular API documentation for a given keyword on angular.io.

Options

search – Search whole angular.io instead of just api. The syntax is: –search (alias: -s)

ng update

ng update Updates the current application to latest versions.

ng update [package]

Options

dry-run – Run through without making any changes. The syntax is: –dry-run (alias: -d)
force – If false, will error out if installed packages are incompatible with the update. The syntax is: –force
all – Whether to update all packages in package.json. The syntax is: –all
next – Use the largest version, including beta and RCs. The syntax is: –next
migrate-only – Only perform a migration, does not update the installed version. The syntax is: –migrate-only
from – Version from which to migrate from. Only available with a single package being updated, and only on migration only. The syntax is: –from
to – Version up to which to apply migrations. Only available with a single package being updated, and only on migrations only. Requires from to be specified. Default to the installed version detected. The syntax is: –to
registry – The NPM registry to use. The syntax is: –registry

ng new

ng new [name] creates a new angular application.

Default applications are created in a directory of the same name, with an initialized Angular application.

Options

dry-run – Run through without making any changes. The syntax is: –dry-run (alias: -d)
force – Forces overwriting of files. The syntax is: –force (alias: -f)
verbose – Adds more details to output logging. The syntax is: –verbose (alias: -v)
collection – Schematics collection to use. The syntax is: –collection (alias: -c)
inline-style – Specifies if the style will be in the ts file. The syntax is: –inline-style (alias: -s)
inline-template – Specifies if the template will be in the ts file. The syntax is: –inline-template (alias: -t)
view-encapsulation – Specifies the view encapsulation strategy. The syntax is: –view-encapsulation
routing – Generates a routing module. The syntax is: –routing
prefix – The prefix to apply to generated selectors. The syntax is: –prefix (alias: -p)
style – The file extension to be used for style files. The syntax is: –style
skip-tests – Skip creating spec files. The syntax is: –skip-tests (alias: -S)
skip-package-json – Do not add dependencies to package.json. The syntax is: –skip-package-json

ng xi18n

ng xi18n Extracts i18n messages from the templates.

ng xi18n [project]

Options

configuration – Specify the configuration to use. The syntax is: –configuration (alias: -c)
browser-target – Target to extract from. The syntax is: –browser-target
i18n-format – Output format for the generated file. The syntax is: –i18n-format
i18n-locale – Specifies the source language of the application. The syntax is: –i18n-locale
output-path – Path where output will be placed. The syntax is: –output-path
out-file – Name of the file to output. The syntax is: –out-file

Angular CLI workspace file (angular.json) schema

Properties

version (integer): File format version. This is currently “1”.
newProjectRoot (string): Path where new projects will be created.
defaultProject (string): Default project name used in commands.
cli: Workspace configuration options for Angular CLI.
defaultCollection (string): The default schematics collection to use.
packageManager (string): Specify which package manager tool to use.
warnings (object): Warning configuration.
- versionMismatch (boolean): Show a warning when the global version is newer than the local one.
- typescriptMismatch (boolean): The name of the project.
schematics (object): Workspace configuration options for Schematics.
schematic-package:schematic-name (object): Object containing options for this schematic. JSON Schema for default schematics:
- @schematics/angular:component
- @schematics/angular:directive
- @schematics/angular:module
- @schematics/angular:service
- @schematics/angular:pipe
- @schematics/angular:class
projects: Configuration options for each project in the workspace.
root (string): Root of the project files.
sourceRoot (string): The root of the source files, assets and index.html file structure..
projectType (string): the type of this project, application or library.
prefix (string): The prefix to apply to generated selectors.
schematics (object): Project configuration options for Schematics. Has the same format as top level Schematics configuration).
architect (string): Project configuration for Architect targets.
- targetName (string): Name of this target.
  - builder (string): Builder for this target, in the format package-name:builder-name.
  - options (string): Options for this builder. JSON Schema for default schematics:
    - @angular-devkit/build-angular:app-shell
    - @angular-devkit/build-angular:browser
    - @angular-devkit/build-angular:dev-server
    - @angular-devkit/build-angular:extract-i18n
    - @angular-devkit/build-angular:karma
    - @angular-devkit/build-angular:protractor
    - @angular-devkit/build-angular:server
    - @angular-devkit/build-angular:tslint
  - configurations (object): A map of alternative target options.
    - configurationName (object): Partial options override for this builder.