Being a command-line interface tool, the Angular CLI is used to initialize, develop, scaffold, and maintain Angular applications. The commands can either be directly used on the command prompt or can be used indirectly through an interactive UI i.e. Angular Console.
ng add Command:
To add support for an external library to an Angular project, the ng add command is used. The npm package is thus added for a published library to the workspace. Also, the default app project is made to use that library, in the way specified by the schematic of the library. For instance, to configure a project for PWA support, add @angular/pwa. The value of defaultProject in angular.json is the default app project.
Syntax:
ng add <collection> [options]
Parameters:
<collection>: It is used to specify the package to be added.
Options:
–defaults=true|false:
Disables the interactive input prompts for options with default when it is set to true.
–help=true|false|json|JSON:
Displays a help message in the console. The default value is false
–interactive=true|false:
Disables the interactive input prompts when it is set to false.
ng build Command:
To compile an Angular app into an output directory named dist/ at the given output path, the ng build command is used and is executed from within a workspace directory only.
Syntax:
ng build <project> [options] ng b <project> [options]
Parameters:
<project>: It is used to define the name of the project to build. This parameter can be an app or a library.
Options:
–aot=true|false:
Builds using Ahead of Time compilation. The default value is false.
–baseHref=baseHref:
Defines the base URL for the application being built.
–buildEventLog=buildEventLog:
Experimental. Defines the output file path for Build Event Protocol events.
–buildOptimizer=true|false:
Enables the ‘@angular-devkit/build-optimizer’ optimizations when using the ‘aot’ option. The default value is false.
–commonChunk=true|false:
Uses a separate bundle containing code used across multiple bundles. The default value is true.
–configuration=configuration:
Defines a named build target, as specified in the “configurations” section of angular.json. A configuration of option defaults for the target accompanies each named target.
Aliases: -c
–deleteOutputPath=true|false:
Delete the output path before building. The default value is true.
–deployUrl=deployUrl:
Defines the URL where files will be deployed.
–es5BrowserSupport=true|false:
Used to enable the conditionally loaded ES2015 polyfills. The default value is false.
–extractCss=true|false:
Extracts css from global styles into css files instead of js ones. The default value is false.
–extractLicenses=true|false:
Extracts all the licenses in a separate file. The default value is false.
–forkTypeChecker=true|false:
Runs the TypeScript type checker in a forked process. The default value is true.
–help=true|false|json|JSON:
Displays a help message for this command in the console. The default value is false.
–i18nFile=i18nFile:
Specifies the localization file to use for i18n.
–i18nFormat=i18nFormat:
Specifies the format of the localization file specified with –i18n-file.
–i18nLocale=i18nLocale:
Specifies the locale to use for i18n.
–i18nMissingTranslation=i18nMissingTranslation:
Specifies the way to handle missing translations for i18n.
–index=index:
Specifies the name of the index HTML file.
–lazyModules:
Specifies the list of additional NgModule files that will be lazy loaded. Angular supports automatic discovery of the Lazy router modules.
–main=main:
Specifies the full path for the main entry point to the app, relative to the current workspace.
–namedChunks=true|false:
Used to use file name for lazy loaded chunk. The default value is true.
–ngswConfigPath=ngswConfigPath:
Specifies the path to ngsw-config.json.
–optimization=true|false:
Used to enable the optimization of the build output.
–outputHashing= none|all|media|bundles:
Specifies the output filename cache-busting hashing mode. The default value is none.
–outputPath=outputPath:
Specifies the full path for the new output directory, relative to the current workspace. It writes output to a folder named dist/ in the current project, by default.
–poll:
EnableS and specifies the file watching poll time-period in milliseconds.
–polyfills=polyfills:
Specifies the full path for the polyfills file, relative to the current workspace.
–preserveSymlinks=true|false:
Used to not use the real path when resolving modules. The default value is false.
–prod=true|false:
Used to set the build configuration to the production target, when its value is set to true. The bundling and limited tree-shaking are used by every builds. A limited dead code elimination is also run by a production build.
–profile=true|false:
Specifies the output profile events for the Chrome profiler. The default value is false.
–progress=true|false:
Used to log progress to the console while building.
–resourcesOutputPath= resourcesOutputPath:
Specifies the path where style resources will be placed, relative to the outputPath.
–serviceWorker=true|false:
Used to generate a service worker config for production builds. The default value is false.
–showCircularDependencies=true|false:
Displays circular dependency warnings on builds. The default value is true.
–sourceMap=true|false:
Displays Output sourcemaps. The default value is true.
–statsJson=true|false:
Used to generate a ‘stats.json’ file which can be analyzed using tools such as: ‘webpack-bundle-analyzer’ or https://webpack.github.io/analyse. The default value is false.
–subresourceIntegrity=true|false:
Used to enable the use of subresource integrity validation. The default value is false.
–tsConfig=tsConfig:
Specifies the full path for the TypeScript configuration file, relative to the current workspace.
–vendorChunk=true|false:
Used to use a separate bundle containing only vendor libraries. The default value is true.
–verbose=true|false:
Used to add more details to output logging. The default value is false.
–watch=true|false:
Used to run build when files change. The default value is false.
ng config Command:
To set or get the Angular configuration values in the angular.json file for the workspace, the ng config command is used.
Syntax:
ng config <jsonPath> <value> [options]
Parameters:
<jsonPath>: It is used to specify the configuration key to set or query, in JSON path format. For instance: “a[3].foo.bar[2]”. It returns the current value of this key, in case no new value is provided, .
<value>: It is used to specify a new value for the given configuration key, if provided.
Options:
–global=true|false:
Used to access the global configuration in the caller’s home directory, when set to true. The default value is false.
Aliases: -g
–help= true|false|json|JSON:
Displays a help message for this command in the console. The default value is false.
ng doc Command:
To open the official Angular documentation (angular.io) in a browser, the ng doc command is used. It also searches for a given keyword.
Syntax:
ng doc <keyword> [options] ng d <keyword> [options]
Parameters:
<keyword>: Defines the keyword to search for, as provided in the search bar in angular.io.
Options:
–help=true|false|json|JSON:
Displays a help message for this command in the console. The default value is false.
–search=true|false:
Searches all of angular.io, when set to true. Searches only API reference documentation, when set to false. The default value is false.
Aliases: -s
ng e2e Command:
To build and serve an Angular app, the ng e2e command is used and is executed from within a workspace directory only. It then runs end-to-end tests using Protractor. It executes for all projects, in case the project name is not specified.
Syntax:
ng e2e <project> [options] ng e <project> [options]
Parameters:
<project>: Used to specify the name of the project to build. It can define both an app or a library.
Options:
–baseUrl=baseUrl:
Defines the base URL for a protractor to connect to.
–configuration=configuration:
Defines the named build target, as specified in the “configurations” section of angular.json. A configuration of option defaults for the target accompanies each named target.
Aliases: -c
–devServerTarget=devServerTarget:
Defines the dev server target to run tests against.
–elementExplorer=true|false:
Used to start the Protractor’s Element Explorer for debugging. The default value is false.
–help= true|false|json|JSON:
Displays a help message for this command in the console. The default value is false.
–host=host:
Specifies the host to listen on. The default value is localhost.
–port:
Defines the port to serve the application.
–prod=true|false:
Used to set the build configuration to the production target, when it is set to true. The bundling and limited tree-shaking are used by each build. A limited dead code elimination is also run by a production build.
–protractorConfig= protractorConfig:
Defines the name of the Protractor configuration file.
–specs:
Used to override the specs in the protractor config.
–suite=suite:
Used to override the suite in the protractor config.
–webdriverUpdate=true|false:
Updates webdriver. The default value is true.
ng generate Command:
To generate and/or modify files based on schematic, the ng generate command is used.
Syntax:
ng generate <schematic> [options] ng g <schematic> [options]
Parameters:
<schematic >: It is used to define the schematic or collection:schematic to be generated. Any of the following sub-commands can be passed to this parameter.
- appShell
- application
- class
- component
- directive
- enum
- guard
- interface
- library
- module
- pipe
- service
- serviceWorker
- universal
Schematic Command Explanation:
appShell:
Generates an app shell for running a server-side version of an app.
Syntax:
ng generate appShell [options] ng g appShell [options]
application:
Creates a new basic app description in the “projects” subfolder of the workspace.
Syntax:
ng generate application <name> [options] ng g application <name> [options]
class:
Creates a new generic class definition in the current or default project.
Syntax:
ng generate class <name> [options] ng g class <name> [options]
component:
Creates a new generic component definition in the current or default project.
Syntax:
ng generate component <name> [options] ng g component <name> [options]
directive:
Creates a new generic directive definition in the current or default project.
Syntax:
ng generate directive <name> [options] ng g directive <name> [options]
enum:
Creates a new, generic enum definition for the current or default project.
Syntax:
ng generate enum <name> [options] ng g enum <name> [options]
guard:
Generates a new, generic route guard definition in the current or default project.
Syntax:
ng generate enum <name> [options] ng g enum <name> [options]
interface:
Create a new generic interface definition in the current or default project.
Syntax:
ng generate interface <name> <type> [options] ng g interface <name> <type> [options]
library:
Creates a new generic library project in the given workspace.
Syntax:
ng generate library <name> [options] ng g library <name> [options]
module:
Creates a new generic NgModule definition in the current or default project.
Syntax:
ng generate module <name> [options] ng g module <name> [options]
pipe:
Creates a new generic pipe definition in the current or default project.
Syntax:
ng generate pipe <name> [options] ng g pipe <name> [options]
service:
Creates a new, generic service definition in the current or default project.
Syntax:
ng generate service <name> [options]
ng g service <name> [options]
serviceWorker:
Passes this schematic to the “run” command to create a service worker.
Syntax:
ng generate serviceWorker [options] ng g serviceWorker [options]
universal:
Passes this schematic to the “run” command to set up server-side rendering for an app.
Syntax:
ng generate universal [options] ng g universal [options]
Options:
–defaults=true|false:
Used to disable the interactive input prompts for options with default when it is set to true.
–dryRun=true|false:
Used to run through and reports activity without writing out results when it is set to true. The default value is false.
Aliases: -d
–force=true|false:
Used to force the overwriting of the existing files when it is set to true. The default value is false.
Aliases: -f
–help=true|false|json|JSON:
Displays a help message in the console. The default value is false.
–interactive=true|false:
Used to disable the interactive input prompts when it is set to false.