Angular CLI

Go back to Tutorial

The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications

Installing Angular 7 CLI

To install the Angular CLI, execute the command:

npm install -g @angular/cli

If you get an error installing the CLI, this is an issue with your local npm setup on your machine, not a problem in Angular CLI.

Verifying Installation – Generating and serving an Angular project via a development server Create and run a new project:

ng new my-project

cd my-project

ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Installing a specific version – The CLI is installed both globally (the command above with the -g argument to npm install) and also within the project. To install a different version of the CLI, you can just update the version locally within your project. The globally installed package will always delegate to the local one.

There are several different versions available at any time:

• Install a previous version, maybe because of a bug in the latest version. For example to get 7.0.2: npm install @angular/cli@7.0.2
• Install the pre-release of a newer minor/major version, to try new features. For example to get 7.0.0-beta.3: npm install @angular/cli@next. Note that the @next version is only useful during beta periods.
• Install a snapshot build from the latest passing run of our CI (angular-cli/master). This is useful if an issue was just fixed or a new feature just landed on master, but is not yet released: npm install @angular/cli@github:angular/cli-builds (or maybe better, find the particular SHA that you want to try: npm install @angular/cli@github:angular/cli-builds#0123456789abcdef)

Angular 7 CLI Commands

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.

 CLI Prompts

The CLI will now prompt users when running common commands like ng new or ng add @angular/material to help you discover built-in features like routing or SCSS support.

CLI Prompts have been added to Schematics, so any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection.

“routing”: {

“type”: “boolean”,

“description”: “Generates a routing module.”,

“default”: false,

“x-prompt”: “Would you like to add Angular routing?”

}

Go back to Tutorial