"Mastering Angular CLI: A Comprehensive Guide to Commonly Used Commands"

Creating a new project: 

  • ng new <project-name>: creates a new Angular project with the specified name. 
  • ng new <project-name> --directory <dir>: creates a new Angular project in the specified directory. 
  • ng new <project-name> --skip-install: creates a new Angular project without installing packages. 
  • ng new <project-name> --routing: creates a new Angular project with routing enabled. 
  • ng new <project-name> --skip-git: creates a new Angular project without initializing a Git repository. 
  • ng new <project-name> --style=<style>: creates a new Angular project with the specified stylesheet format (e.g. css, scss, sass, less). 
  • ng new <project-name> --prefix=<prefix>: sets the prefix for the generated components and directives. 
  • ng new <project-name> --skip-tests: creates a new Angular project without generating any test files. 
  • ng new <project-name> --minimal: creates a new Angular project with minimal files. 
  • ng new <project-name> --package-manager=<manager>: sets the package manager to be used for the project (e.g. npm, yarn, pnpm). 
  • ng new --skip-install: creates a new Angular project without installing packages. 

 

Generating code:

  • ng generate component <component-name>: generates a new component with the specified name. 
  • ng generate directive <directive-name>: generates a new directive with the specified name. 
  • ng generate pipe <pipe-name>: generates a new pipe with the specified name. 
  • ng generate service <service-name>: generates a new service with the specified name. 
  • ng generate class <class-name>: generates a new class with the specified name. 
  • ng generate enum <enum-name>: generates a new enum with the specified name. 
  • ng generate interface <interface-name>: generates a new interface with the specified name. 
  • ng generate module <module-name>: generates a new module with the specified name. 
  • ng generate guard <guard-name>: generates a new guard with the specified name. 
  • ng generate component <component-name> --inline-template: generates a new component with an inline template. 
  • ng generate component <component-name> --inline-style: generates a new component with inline styles. 
  • ng generate component <component-name> --style=<style>: generates a new component with the specified stylesheet format (e.g. css, scss, sass, less). 
  • ng generate component <component-name> --skip-tests: generates a new component without generating any test files. 
  • ng generate component <component-name> --skip-selector: generates a new component without a selector. 
  • ng generate component <component-name> --change-detection=<strategy>: generates a new component with the specified change detection strategy (e.g. OnPush). 
  • ng generate component <component-name> --view-encapsulation=<encapsulation>: generates a new component with the specified view encapsulation strategy (e.g. None). 

 

Running the app: 

  • ng serve: compiles and serves the application in development mode on http://localhost:4200/
  • ng serve --port=<port>: compiles and serves the application on the specified port. 
  • ng serve --open: compiles and serves the application and opens it in the default browser. 
  • ng serve --aot: compiles and serves the application with ahead-of-time compilation. 
  • ng serve --configuration=<configuration>: compiles and serves the application using the specified configuration (e.g. development, production, staging). 
  • ng serve --ssl: compiles and serves the application with HTTPS enabled. 
  • ng serve --proxy-config=<file>: compiles and serves the application with a proxy configuration file. 
  • ng serve --live-reload: compiles and serves the application with live reload enabled. 
  • ng serve --public-host=<host>: compiles and serves the application with the specified public host. 
  • ng serve --hmr: compiles and serves the application with Hot Module Replacement enabled. 


Building the app:

  • ng build: builds the application for development. 
  • ng build --configuration=<configuration>: builds the application using the specified configuration (e.g. development, production, staging). 
  • ng build --prod: builds the application for production. 
  • ng build --aot: builds the application with ahead-of-time compilation. 
  • ng build --base-href=<url>: builds the application with the specified base URL. 
  • ng build --configuration=<configuration>: builds the application using the specified configuration (e.g. development, production, staging). 
  • ng build --output-path=<path>: builds the application and outputs the files to the specified path. 
  • ng build --deploy-url=<url>: builds the application with the specified deploy URL. 
  • ng build --stats-json: builds the application and generates a stats.json file that contains detailed information about the build. 
  • ng build --source-map: builds the application with source maps enabled. 
  • ng build --optimization: builds the application with optimization enabled. 
  • ng build --progress: builds the application with progress output enabled. 
  • ng build --watch: builds the application and watches for changes to rebuild. 
  • ng build --verbose: builds the application with verbose output enabled. 


Running Tests: 

  • ng test: runs unit tests in the application. 
  • ng test --configuration=<configuration>: runs unit tests using the specified configuration (e.g. development, production, staging). 
  • ng test --code-coverage: runs unit tests and generates a code coverage report. 
  • ng test --watch: runs unit tests and watches for changes. 
  • ng test --browsers=<browsers>: runs unit tests using the specified browsers (e.g. ChromeHeadless, Firefox). 
  • ng e2e: runs end-to-end tests in the application. 
  • ng e2e --configuration=<configuration>: runs end-to-end tests using the specified configuration (e.g. development, production, staging). 
  • ng e2e --protractor-config=<file>: runs end-to-end tests with the specified Protractor configuration file. 
  • ng e2e --element-explorer: runs end-to-end tests with the element explorer. 
  • ng lint: runs lint checks on the application code. 
  • ng format: formats the application code using Prettier or TSLint. 
  • ng build --prod --aot --build-optimizer: builds the application for production with ahead-of-time compilation and build optimizer enabled. 


Managing packages: 

  • ng add <package>: installs and configures a package for the application. 
  • ng update: updates the application and its dependencies to the latest versions. 
  • ng update <package>: updates a specific package to the latest version. 
  • ng update --all: updates all packages and dependencies to the latest versions. 
  • ng update --dry-run: simulates an update without actually modifying the application. 
  • ng update --force: forces an update to the latest version, even if it introduces breaking changes. 
  • ng config <key> <value>: sets a configuration option for the application. 
  • ng config get <key>: gets the value of a configuration option. 
  • ng config --global <key> <value>: sets a global configuration option for the Angular CLI. 
  • ng config --local <key> <value>: sets a local configuration option for the current project. 
  • ng xi18n: extracts and generates translation files for the application. 
  • ng add --help: displays help for the ng add command and its options. 
  • ng update --help: displays help for the ng update command and its options. 
  • ng config --help: displays help for the ng config command and its options. 
  • ng xi18n --help: displays help for the ng xi18n command and its options. 

 

Displaying Help and Documentation:

  • ng version: displays the version of the Angular CLI and other installed packages. 
  • ng help: displays help for the Angular CLI and its commands. 
  • ng doc <search-term>: opens the official Angular documentation for the specified search term in the default browser. 
  • ng completion: displays the command completion script for the Angular CLI for the current shell. 
  • ng config -g cli.packageManager <package-manager>: sets the default package manager for the Angular CLI (e.g. npm, yarn). 
  • ng config -g cli.defaultCollection <collection>: sets the default collection for schematics used by the Angular CLI (e.g. @schematics/angular, @angular/material). 
  • ng doc <search-term>: opens the official Angular documentation for the specified search term in the default browser. 

#AngularCLI #AngularFramework #WebDevelopment #FrontEndDevelopment #DeveloperTools #ProgrammingTips #CodeNewbie #LearningToCode #CodingCommunity #fullstackdevelopment

To view or add a comment, sign in

Others also viewed

Explore content categories