Angular CLI


    # install CLI
    npm install -g @angular/cli
    # create new workspace with named root folder
    ng new my-app
    # start app on local server
    ng serve
    ng serve --open # -o , open also in browser
    # add component
    ng generate component component-name      # with default, template in separate file
    ng generate component component-name -it  # with intline template
    ng generate component component-name --inline-style # empty styles array

    ng generate service service-name

    # create router module in a separate, top-level module
    # --flat - put file in src/app instead of its own folder
    # --routing - add routing module
    # --module=app - register it in the imports array of the AppModule
    ng generate module app-routing --flat --module=app
    ng generate module heroes/heroes --module app --flat --routing

    # add feature module and a component
    ng generate module CustomerDashboard
    ng generate component customer-dashboard/CustomerDashboard

    # guard
    ng generate guard auth/auth

    # class for data
    ng generate class hero

    # In-memory Web API - emulates requests to real server
    npm install angular-in-memory-web-api --save
ng add <package-name> [options]

Adds the npm package for a published library to your workspace, and configures the project in the current working directory to use that library, as specified by the library schematic, for example, adding @angular/pwa configures your project for PWA support: ng add @angular/pwa

Option Description
--defaults=false|true When true, disables interactive input prompts for options with a default
--dry-run=false|true Run through and reports activity without writing out results.
--force=false|true Force overwriting of existing files.
--interactive=false|true When false, disables interactive input prompts
--registry=string The NPM registry to use.
--skip-confirmation=false|true Skip asking a confirmation prompt before installing and executing the package. Ensure package name is correct prior to using this option.
--verbose=false|true Display additional details about internal operations during execution.
ng analytics [command]

Configures the gathering of Angular CLI usage metrics

Command Description
disable|off Disables analytics gathering and reporting for the user
enable|on Enables analytics gathering and reporting for the user
info Prints analytics gathering and reporting configuration in the console
prompt Prompts the user to set the analytics gathering status interactively
--global|-g - configure analytics gathering and reporting globally in the callers home directory
ng build <project-name> [options]   ||   ng b <project-name> [options]
Option Description
--allowed-common-js-dependencies=[array] A list of CommonJS packages that are allowed to be used without a build time warning
--aot=false|true Build using Ahead of Time compilation.
--base-href=baseHref Base url for the application being built
--build-optimizer=false|true Enables advanced build optimizations when using the 'aot' option.
--common-chunk=false|true Use a separate bundle containing code used across multiple bundles
--configuration=configuration || -c 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
--cross-origin=none|anonymous|use-credentials Define the crossorigin attribute setting of elements that provide CORS support.
--delete-output-path=false|true Delete the output path before building
--extract-licenses=false|true Extract all licenses in a separate file
--i18n-duplicate-translation=warning|error|ignore How to handle duplicate translations for i18n.
--i18n-missing-translation=warning|error|ignore How to handle missing translations for i18n.
--index=index The name of the index HTML file
--inline-style-language =css The stylesheet language to use for the application's inline component styles: css|less|sass|scss
--localize Translate the bundles in one or more locales.
--main=main The full path for the main entry point to the app, relative to the current workspace
--named-chunks=false|true Use file name for lazy loaded chunks
--ngsw-config-path=ngswConfigPath Path to ngsw-config.json
--optimization=false|true Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining
--output-hashing=none|all|media|bundles Define the output filename cache-busting hashing mode
--output-path=outputPath The full path for the new output directory, relative to the current workspace. By default, writes output to a folder named dist/ in the current project
--poll Enable and define the file watching poll time period in milliseconds
--polyfills=polyfills The full path for the polyfills file, relative to the current workspace
--preserve-symlinks=false|true Do not use the real path when resolving modules
--progress=false|true Log progress to the console while building
--resources-output-path=resourcesOutputPath The path where style resources will be placed, relative to outputPath
--service-worker=false|true Generates a service worker config for production builds
--source-map=false|true Output sourcemaps
--stats-json=false|true Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or webpack.github.io/analyse/
--subresource-integrity=false|true Enables the use of subresource integrity validation
--ts-config=tsConfig The full path for the TypeScript configuration file, relative to the current workspace
--vendor-chunk=false|true Use a separate bundle containing only vendor libraries
--verbose=false|true Adds more details to output logging/td>
--watch=false|true Run build when files change
--web-worker-ts-config=conf TS configuration for Web Worker modules
ng cache [command]

configure persistent disk cache and retrieve cache statistics, amend the default cache settings with cli.cache object in Workspace Configuration:


    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "cli": {
        "cache": {
          // ...
        }
      },
      "projects": {}
    }

by default, disk cache is only enabled for local environments, value of environment can be one of the following: all - allows disk cache on all machines, local - allows disk cache only on development machines, ci - allows disk cache only on continuous integration (Ci) systems: ng config cli.cache.environment|enabled|path all

Command Description
clean Deletes persistent disk cache from disk
disable|off Disables persistent disk cache for all projects in the workspace
enable|on Enables disk cache for all projects in the workspace
info Prints persistent disk cache configuration and statistics in the console
ng completion [command]
Command Description
script Generate a bash and zsh real-time type-ahead autocompletion script
ng config <json-path> <value> [options]
Option Description
--global|-g - configure analytics gathering and reporting globally in the callers home directory
ng deploy <project> [--options] 

    "projects": {
      "my-project": {
        ...
        "architect": {
          ...
          "deploy": {
            "builder": "@angular/fire:deploy",
            "options": {}
          }
        }
      }
    }

by default, disk cache is only enabled for local environments, value of environment can be one of the following: all - allows disk cache on all machines, local - allows disk cache only on development machines, ci - allows disk cache only on continuous integration (Ci) systems: ng config cli.cache.environment|enabled|path all

Option Description
--configuration || -c One or more named builder configurations as a comma-separated list as specified in the "configurations" section in angular.json, builder uses the named configurations to run the given target
ng doc <keyword> [options]   ||   ng d <keyword> [options]

opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword

Option Description
--search=false|true || -s When true, searches all of angular.io. Otherwise, searches only API reference documentation
--version=version Contains the version of Angular to use for the documentation. If not provided, the command uses your current Angular core version
ng e2e <project> [options]   ||   ng e <project> [options]

builds and serves an Angular app, then runs end-to-end tests using Protractor, must be executed from within a workspace directory, when a project name is not supplied, it will execute for all projects

Option Description
--configuration=configuration || -c One or more named builder configurations as a comma-separated list as specified in the "configurations" section in angular.json. The builder uses the named configurations to run the given target
ng extract-i18n <project>

Extracts i18n messages from source code

Option Type Description
--browser-target string Browser builder target to extract i18n messages in the format of project:target[:configuration], also pass in more than one configuration name as a comma-separated list: project:target:production,staging
--configuration string One or more named builder configurations as a comma-separated list as specified in the "configurations" section in angular.json, builder uses the named configurations to run the given target
--format xmb|xlf|xlif|xliff|xlf2|xliff2|json|arb|legacy-migrate Output format for the generated file
--out-file string Name of the file to output
--output-path string Path where output will be placed
--progress boolean Log progress to the console
ng generate <schematic> [options]   ||   ng g <schematic> [options]

generates and/or modifies files based on a schematic, in the given or default project

Option Description
--defaults=false|true

When true, disables interactive input prompts for options with a default
--dry-run=false|true || -d

When true, runs through and reports activity without writing out results
--force=false|true || -f

When true, forces overwriting of existing files
--interactive=false|true

When false, disables interactive input prompts
--strict=false|true

skip prompt for enabling strict mode: configure TypeScript and the Angular compiler for stricter type checking, and apply smaller bundle budgets by default
--standalone=false|true

create standalone component
ng generate app-shell [options]
Option Description
--app-dir=appDir

The name of the application directory, default: app
--app-id=appId

The app ID to use in withServerTransition(), default: serverApp
--main=main.server.ts

The name of the main entry-point file, default: main.server.ts
--project=app-name/var>

The name of the related client app, string
--root-module-class-name=rootModuleClassName

The name of the root module class, default: AppServerModule
--root-module-file-name=rootModuleFileName

The name of the root module file, default: app.server.module.ts
--route=route

Route path used to produce the app shell, default: shell
ng generate application <name> [options]
Option Description
--inline-style=false|true || -s

When true, includes styles inline in the root component.ts file. Only CSS styles can be included inline. Default is false, meaning that an external styles file is created and referenced in the root component.ts file
--inline-template=false|true || -t

When true, includes template inline in the root component.ts file. Default is false, meaning that an external template file is created and referenced in the root component.ts file.

--minimal=false|true

When true, creates a bare-bones project without any testing frameworks. (Use for learning purposes only.)
--prefix=prefix || -p

A prefix to apply to generated selectors
--routing=false|true

When true, creates a routing NgModule
--skip-install=false|true

Skip installing dependency packages
--skip-package-json=false|true

When true, does not add dependencies to the "package.json" file
--skip-tests=false|true || -S

When true, does not create "spec.ts" test files for the app
--strict=false|true || -S

Creates an application with stricter bundle budgets settings
--style=css|scss|sass|less

The file extension or preprocessor to use for style files

Default: css
--view-encapsulation=Emulated|None|ShadowDom

The view encapsulation strategy to use in the new app
ng generate class <name> [options]
Option Description
--project=project

The name of the project
--skip-tests=false|true

When true, does not create "spec.ts" test files for the new class
--type=type

Adds a developer-defined type to the filename, in the format "name.type.ts"
ng generate component <name> [options]
Option Description
--change-detection=Default|OnPush || -c

The change detection strategy to use in the new component
--display-block=false|true || -b

Specifies if the style will contain :host { display: block; }
--export=false|true

When true, the declaring NgModule exports this component
--flat=false|true

When true, creates the new files at the top level of the current project
--inline-style=false|true || -s

When true, includes styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file
--inline-template=false|true

When true, includes template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file
--module=module || -m

The declaring NgModule
--prefix=prefix || -p

The prefix to apply to the generated component selector
--project=project

The name of the project
--selector=selector

The HTML selector to use for this component
--skip-import=false|true

When true, does not import this component into the owning NgModule
--skip-selector=false|true

Specifies if the component should have a selector or not
--skip-tests=false|true

When true, does not create "spec.ts" test files for the new component
--standalone=false|true

Whether the generated component is standalone
--type=
Component

Adds a developer-defined type to the filename, in the format "name.type.ts"
--view-encapsulation=Emulated|None|ShadowDom || -v

The view encapsulation strategy to use in the new component
ng generate directive <name> [options]
Option Description
--export=false|true

When true, the declaring NgModule exports this directive
--flat=false|true

When true (the default), creates the new files at the top level of the current project
--module=module

The declaring NgModule

Aliases: -m
--prefix=prefix

A prefix to apply to generated selectors

Aliases: -p
--project=project

The name of the project
--selector=selector

The HTML selector to use for this directive
--skip-import=false|true

When true, does not import this directive into the owning NgModule
--skip-tests=false|true

When true, does not create "spec.ts" test files for the new class
--standalone=false|true

Whether the generated component is standalone
ng generate enum <name> [options]
Option Description
--project=project

The name of the project in which to create the enum. Default is the configured default project for the workspace
--type=type

Adds a developer-defined type to the filename, in the format "name.type.ts"
ng generate guard <name> [options]
Option Description
--flat=false|true

When true (the default), creates the new files at the top level of the current project
--implements

Specifies which interfaces to implement
--project=project

The name of the project
--skip-tests=false|true

When true, does not create "spec.ts" test files for the new guard
ng generate interceptor <name> [options]

Creates a new, generic interceptor definition in the given or default project

Option Description
--flat=false|true

When true (the default), creates the new files at the top level of the current project
--project=project

The name of the project
--skip-tests=false|true

When true, does not create "spec.ts" test files for the new guard
ng generate interface <name> <type> [options]
Argument Description
<name>

The name of the interface
<type>

Adds a developer-defined type to the filename, in the format "name.type.ts"
Option Description
--prefix=prefix

A prefix to apply to generated selectors

Default:

--project=project

The name of the project
ng generate library <name> [options]
Option Description
--entryFile=entryFile

The path at which to create the library's public API file, relative to the workspace root

Default: public-api
--prefix=prefix

A prefix to apply to generated selectors

Default: lib

Aliases: -p
--skip-install=false|true

When true, does not install dependency packages
--skip-package-json=false|true

When true, does not add dependencies to the "package.json" file.

--skip-ts-config=false|true

When true, does not update "tsconfig.json" to add a path mapping for the new library. The path mapping is needed to use the library in an app, but can be disabled here to simplify development
ng generate module <name> [options] - NgModule
Option Description
--flat=false|true

When true, creates the new files at the top level of the current project root.

--module=module

The declaring NgModule

Aliases: -m
--project=project

The name of the project
--route=name

The route path for a lazy-loaded module. When supplied, creates a component in the new module, and adds the route to that component in the Routes array declared in the module provided in the --module option.
--routing=false|true

When true, creates a routing module
--routing-scope=Child|Root

The scope for the new routing module
ng generate pipe <name> [options]
Option Description
--export=false|true

When true, the declaring NgModule exports this pipe
--flat=false|true

When true (the default) creates files at the top level of the project
--module=module

The declaring NgModule

Aliases: -m
--project=project

The name of the project
--skip-import=false|true

When true, does not import this pipe into the owning NgModule
--skip-tests=false|true

When true, does not create "spec.ts" test files for the new pipe
--standalone=false|true

create standalone component
ng generate resolver <name> [options]
Option Description
--flat=false|true

When true (the default) creates files at the top level of the project
--project=project

The name of the project
--skip-tests=false|true

When true, does not create "spec.ts" test files for the new pipe
ng generate service <name> [options]
Option Description
--flat=false|true

When true (the default), creates files at the top level of the project
--project=project

The name of the project
--skip-tests=false|true

When true, does not create "spec.ts" test files for the new service
ng generate service-worker [options]
Option Description
--project=project

The name of the project
--target=build

The target to apply service worker to
ng generate web-worker <name> [options]
Option Description
--project=project

The name of the project
--snippet=false|true

Add a worker creation snippet in a sibling file of the same name
ng lint <project> [options]   ||   ng l <project> [options]

runs linting tools on Angular app code in a given project folder, takes the name of the project, as specified in the projects section of the angular.json workspace configuration file, when a project name is not supplied, it will execute for all projects, default linting tool is TSLint, and the default configuration is specified in the project tslint.json file


    "projects": {
      "my-project": {
        ...
        "architect": {
          ...
          "lint": {
            "builder": "@angular-eslint/builder:lint",
            "options": {}
          }
        }
      }
    }
Option Description
--configuration=configuration || -c

The linting configuration to use
ng new <project> [options]   ||   ng n <project> [options]

creates a new workspace and an initial Angular app

Option Description
--collection=collection || -c

A collection of schematics to use in generating the initial app
--commit=false|true

Initial git repository commit information
--create-application=false|true

When true (the default), creates a new initial app project in the src folder of the new workspace. When false, creates an empty workspace with no initial app. You can then use the generate application command so that all apps are created in the projects folder
--defaults=false|true

When true, disables interactive input prompts for options with a default
--directory=directory

The directory name to create the workspace in
--dry-run=false|true || -d

When true, runs through and reports activity without writing out results
--force=run=false|true || -f

When true, forces overwriting of existing files
--inline-style=false|true || -s

When true, includes styles inline in the component TS file. By default, an external styles file is created and referenced in the component TS file
--inline-template=false|true || -t

When true, includes template inline in the component TS file. By default, an external template file is created and referenced in the component TS file
--interactive=false|true

When false, disables interactive input prompts
--new-project-root=newProjectRoot

The path where new projects will be created, relative to the new workspace root, default: projects
--package-manager=npm|yarn|pnpm|cnpm

The package manager used to install dependencies
--prefix=prefix || -p

The prefix to apply to generated selectors for the initial project, default: app
--routing=false|true

When true, generates a routing module for the initial project
--skip-git=false|true || -g

When true, does not initialize a git repository
--skip-install=false|true

When true, does not install dependency packages
--skip-tests=false|true || -S

When true, does not generate "spec.ts" test files for the new project.

--strict=false|true

Creates a workspace with stricter type checking and stricter bundle budgets settings, helps improve maintainability and catch bugs ahead of time
--style=css|scss|sass|less

The file extension or preprocessor to use for style files
--view-encapsulation=Emulated|None|ShadowDom

The view encapsulation strategy to use in the initial project
ng run <project>:target[:configuration]

runs an Architect target with an optional custom builder configuration defined in project, define new targets and their configuration options in the "architect" section of the angular.json file

Option Description
target

The Architect target to run
ng serve <project> [options]   ||   ng s <project> [options]

builds and serves app, rebuilding on file changes

||   ng
Option Description
--allowed-hosts=[array]

List of hosts that are allowed to access the dev server
--browser-target=browserTarget

A browser builder target to serve in the format of project:target[:configuration], also pass in more than one configuration name as a comma-separated list: project:target:production,staging
--configuration=configuration || -c

One or more named builder configurations as a comma-separated list as specified in the "configurations" section in angular.json, builder uses the named configurations to run the given target
--disable-host-check=false|true

Don't verify connected clients are part of allowed hosts
--hmr=false|true

Enable hot module replacement
--host=host

Host to listen on, default: localhost
--live-reload=false|true

Whether to reload the page on change, using live-reload
--open=false|true || -o

Opens the url in default browser
--poll

Enable and define the file watching poll time period in milliseconds
--port

Port to listen on, default: 4200
--proxy-config=proxyConfig

Proxy configuration file
--public-host=publicHost

Specify the URL that the browser client will use
--serve-path=servePath

The pathname where the app will be served
--ssl=false|true

Serve using HTTPS
--ssl-cert=sslCert

SSL certificate to use for serving HTTPS
--ssl-key=sslKey

SSL key to use for serving HTTPS
--verbose=false|true

Adds more details to output logging
--watch=false|true

Rebuild on change
ng test <project> [options]   ||   ng t <project> [options]

runs unit tests in a project, takes the name of the project, as specified in the projects section of the angular.json workspace configuration file, when a project name is not supplied, it will execute for all projects

Option Description
--browsers=browsers

Override which browsers tests are run against
--code-coverage=false|true

Output a code coverage report

Default: false
--code-coverage-exclude

Globs to exclude from code coverage
--configuration=configuration

One or more named builder configurations as a comma-separated list as specified in the "configurations" section in angular.json, builder uses the named configurations to run the given target

Aliases: -c
--include=[array]

Globs of files to include, relative to workspace or project root, 2 special cases: when a path to directory is provided, all spec files ending ".spec.@(ts|tsx)" will be included, when a path to a file is provided, and a matching spec file exists it will be included instead
--include=[array]

Globs of files to include, relative to workspace or project root, 2 special cases: when a path to directory is provided, all spec files ending ".spec.@(ts|tsx)" will be included, when a path to a file is provided, and a matching spec file exists it will be included instead
--inline-style-language=css|less|sass|scss

The stylesheet language to use for the application's inline component styles
--karma-config=karmaConfig

The name of the Karma configuration file
--main=main

The name of the main entry-point file
--poll

Enable and define the file watching poll time period in milliseconds
--polyfills=polyfills

The name of the polyfills file
--preserve-symlinks=false|true

Do not use the real path when resolving modules

Default: false
--progress=false|true

Log progress to the console while building
--reporters

Karma reporters to use. Directly passed to the karma runner
--source-map=false|true

Output sourcemaps

Default: true
--ts-config=tsConfig

The name of the TypeScript configuration file
--watch=false|true

Run build when files change
--web-worker-ts-config

TS configuration for Web Worker modules
ng update [packages..]
Option Description
--allow-dirty=false|true Whether to allow updating when the repository contains modified or untracked files
--create-commits=false|true || -C Create source control commits for updates and migrations
--force=false|true Ignore peer dependency version mismatches. Passes the '--force' flag to the package manager when installing packages
--from Version from which to migrate from, only available with a single package being updated, and only with 'migrate-only'
--migrate-only=false|true Only perform a migration, do not update the installed version
--name The name of the migration to run. Only available with a single package being updated, and only with 'migrate-only' option
--next=false|true Use the prerelease version, including beta and RCs
--to Version up to which to apply migrations, only available with a single package being updated, and only with 'migrate-only' option, requires 'from' to be specified, default to the installed version detected
--verbose=false|true Display additional details about internal operations during execution
ng version [options]   ||   ng v [options]

Angular CLI version


Back to Main Page