@angular/cli

What is @angular/cli?

The @angular/cli package is a command-line interface tool that you can use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. It provides commands for creating new projects, generating application and library code, performing a variety of ongoing development tasks such as testing, bundling, and deployment.

What are @angular/cli's main functionalities?

Project Scaffolding

Creates a new Angular application with a default structure by running the 'ng new' command followed by the project name.

ng new my-angular-app

Generating Components, Services, and other features

Generates a new component and its associated files by using the 'ng generate' command followed by the feature type and name.

ng generate component my-component

Building and Serving the Application

Compiles the application and starts a web server, making the app accessible in a browser. The 'ng serve' command is used for this purpose.

ng serve

Running Unit Tests

Executes the unit tests defined in the application using the 'ng test' command.

ng test

Building for Production

Compiles the application for production deployment, optimizing the build for performance and size using the 'ng build' command with the '--prod' flag.

ng build --prod

Other packages similar to @angular/cli

create-react-app

Similar to @angular/cli, create-react-app is a command-line interface for setting up new React applications. It abstracts away build configuration to a pre-configured setup, allowing developers to focus on writing code. Unlike @angular/cli, it is tailored specifically for React and does not provide an extensive set of generation commands.

vue-cli

Vue CLI is a full system for rapid Vue.js development, similar to @angular/cli for Angular. It provides project scaffolding, a development server, build tools, and a set of plugins for common tasks. Vue CLI is designed for Vue.js and offers a similar level of functionality for Vue developers.

ember-cli

Ember CLI is a command-line utility for creating, developing, and building Ember.js applications. It provides a standardized development structure and build pipeline, much like @angular/cli does for Angular. Ember CLI focuses on Ember.js and has a strong emphasis on convention over configuration.

README

Angular CLI - The CLI tool for Angular.

The sources for this package are in the Angular CLI repository. Please file issues and pull requests against that repository.

Usage information and reference details can be found in repository README file.

Changelog

17.0.0 (2023-11-08)

Breaking Changes

@schematics/angular

• Routing is enabled by default for new applications when using ng generate application and ng new. The --no-routing command line option can be used to disable this behaviour.
• ng g interceptor now generate a functional interceptor by default. or guard by default. To generate a class-based interceptor the --no-functional command flag should be used.
• rootModuleClassName, rootModuleFileName and main options have been removed from the public pwa and app-shell schematics.
• App-shell and Universal schematics deprecated unused appId option has been removed.

@angular-devkit/build-angular

• Node.js v16 support has been removed

  Node.js v16 is planned to be End-of-Life on 2023-09-11. Angular will stop supporting Node.js v16 in Angular v17. For Node.js release schedule details, please see: https://github.com/nodejs/release#release-schedule

@angular-devkit/schematics

• deprecated runExternalSchematicAsync and runSchematicAsync methods have been removed in favor of runExternalSchematic and runSchematic.

Deprecations

@angular-devkit/build-angular

• The browserTarget in the dev-server and extract-i18n builders have been deprecated in favor of buildTarget.

@angular/cli

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------- | | f4e7fa873 | fix | add @angular/ssr as part of the ng update packageGroup | | 1f7156b11 | fix | add Node.js 20 as supported version | | 4b9a87c90 | fix | ignore peer mismatch when updating @nguniversal/builders | | f66f9cf61 | fix | remove Node.js 16 from supported checks |

@schematics/angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------- | | 741cca73c | feat | add ng new --ssr | | 3938863b9 | feat | add migration to migrate from @nguniversal to @angular/ssr | | dc6b6eaf6 | feat | add migration to replace usages of @nguniversal/builders | | 6979eba3c | feat | enable hydration when adding SSR, SSG or AppShell | | 1a6a139aa | feat | enable routing by default for new applications | | ac0db6697 | feat | enable standalone by default in new applications | | a189962a5 | feat | generate functional interceptors by default | | ae45c4ab8 | feat | update ng new generated application | | 3f8aa9d8c | feat | update ng new to use the esbuild application builder based builder | | 03a1eaf01 | fix | account for new block syntax in starter template | | eb0fc7434 | fix | add missing express REQUEST and RESPONSE tokens | | ecdcff2db | fix | add missing icons in ng-new template | | 175944672 | fix | do not add unnecessary dependency on @angular/ssr during migration | | 23c4c5e42 | fix | enable TypeScript esModuleInterop by default for ESM compliance | | d60a6e86a | fix | noop workspace config migration when already executed | | e516a4bdb | fix | pass ssr option to application schematics | | 419b5c191 | fix | remove baseUrl from tsconfig.json | | 0368b23f2 | fix | use @types/node v18 | | b15e82758 | refactor | remove deprecated appId option |

@angular-devkit/build-angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | --------------------------------------------------------------------------------------------------------------- | | c48982dc1 | feat | add buildTarget option to dev-server and extract-i18n builders | | 1fb0350eb | feat | add initial support for bundle budgets to esbuild builders | | 8168ae2a8 | feat | apply global CSS updates without a live-reload when using vite | | 91019bde2 | feat | enable localize support for SSR with application builder | | 3c0719bde | feat | initial i18n extraction support for application builder | | 8bce80b91 | feat | initial support for application Web Worker discovery with esbuild | | 49f07a84d | feat | standardize application builder output structure | | c3a87a60e | feat | support basic web worker bundling with esbuild builders | | 9e425308a | feat | support component style budgets in esbuild builders | | 771e036d5 | feat | support deploy URL option for browser-esbuild builder | | c5f3ec71f | feat | support i18n inlining with esbuild-based builder | | fd62a9315 | feat | support i18n with service worker and app-shell with esbuild builders | | 5898f72a9 | feat | support namedChunks option in application builder | | 8f9a0d70c | feat | support standalone apps route discovery during prerendering | | 6b08efa6f | fix | account for arrow function IIFE | | 2f299fc7b | fix | account for styles specified as string literals and styleUrl | | 9994b2dde | fix | add a maximum rendering timeout for SSR and SSG during development | | da4e19145 | fix | address a path concatenation on Windows | | 9d4d11cc4 | fix | allow SSR compilation to work with TS allowJs option | | e3c5b91e8 | fix | automatically include known packages in vite prebundling | | ca38ee34c | fix | avoid binary content in architect results with browser-esbuild | | 657f78292 | fix | avoid dev server update analysis when build fails with vite | | 2c33f09db | fix | avoid dev-server proxy rewrite normalization when invalid value | | b182be8aa | fix | avoid in-memory prerendering ESM loader errors | | 0c982b993 | fix | avoid repeat error clear in vite development server | | e41e2015b | fix | avoid spawning workers when there are no routes to prerender | | 2d2e79921 | fix | clean up internal Angular state during rendering SSR | | 83020fc32 | fix | clear diagnostic cache when external templates change with esbuild builders | | c12f98f94 | fix | conditionally enable deprecated Less stylesheet JavaScript support | | e10f49efa | fix | convert AOT compiler exceptions into diagnostics | | 667f43af6 | fix | correctly resolve polyfills when baseUrl URL is not set to root | | d46fb128a | fix | disable dependency optimization for SSR | | 1b384308c | fix | disable parallel TS/NG compilation inside WebContainers | | 070da72c4 | fix | do not perform advanced optimizations on @angular/common/locales/global | | 508c7606e | fix | do not print Angular is running in development mode. in the server console when running prerender in dev mode | | e817656f6 | fix | do not print Angular is running in development mode. in the server console when running prerender in dev mode | | f806e3498 | fix | elide setClassDebugInfo calls | | 188a00f3e | fix | elide setClassMetadataAsync calls | | 05ce9d697 | fix | ensure all SSR chunks are resolved correctly with dev server | | d392d653c | fix | ensure correct web worker URL resolution in vite dev server | | 1a6aa4378 | fix | ensure css url() prefix warnings support Sass rebasing | | 52f595655 | fix | ensure i18n locale data is included in SSR application builds | | 3ad028bb4 | fix | ensure localize polyfill and locale specifier are injected when not inlining | | 3e5a99c2c | fix | ensure recalculation of component diagnostics when template changes | | fa234a418 | fix | ensure secondary Angular compilations are unblocked on start errors | | c0c7dad77 | fix | ensure that externalMetadata is defined | | ac7caa426 | fix | ensure unique internal identifiers for inline stylesheet bundling | | 1f73bcc49 | fix | ensure Web Worker code file is replaced in esbuild builders | | 23a722b79 | fix | exclude node.js built-ins from vite dependency optimization | | fd2c4c324 | fix | expose ssr-dev-server builder in the public api | | 9eb58cf7a | fix | fail build on non bundling error when using the esbuild based builders | | a3e9efe80 | fix | fully track Web Worker file changes in watch mode | | b9505ed09 | fix | generate a file containing a list of prerendered routes | | 192a2ae6b | fix | handle HTTP requests to assets during prerendering | | 19191e32b | fix | handle HTTP requests to assets during SSG in dev-server | | 8981d8c35 | fix | improve sharing of TypeScript compilation state between various esbuild instances during rebuilds | | 5a3ae0159 | fix | in vite skip SSR middleware for path with extensions | | f87f22d3f | fix | keep dependencies pre-bundling validate between builds | | 0da87bf1c | fix | limit concurrent output file writes with application builder | | 391ff78cb | fix | log number of prerendered routes in console | | c46f312ad | fix | media files download files in vite | | 87425a791 | fix | normalize paths when invalidating stylesheet bundler | | d4f37da50 | fix | only show changed output files in watch mode with esbuild | | 0d54f2d20 | fix | only watch used files with application builder | | 1f299ff2d | fix | prebundle dependencies for SSR when using Vite | | 58bd3971f | fix | process nested tailwind usage in application builder | | 60ca3c82d | fix | provide server baseUrl result property in Vite-based dev server | | 0c20cc4dc | fix | re-add TestBed compileComponents in schematics to support defer block testing | | 9453a2380 | fix | remove CJS usage warnings for inactionable packages | | 5bf7022c4 | fix | remove support for Node.js v16 | | c27ad719f | fix | remove unactionable error overlay suggestion from Vite-based dev server | | 263271fae | fix | resolve and load sourcemaps during prerendering to provide better stacktraces | | 651e3195f | fix | resolve and load sourcemaps when using vite dev server with prerendering and ssr | | b78508fc8 | fix | several fixes to assets and files writes in browser-esbuild builder | | c4c299bce | fix | silence xhr2 not ESM module warning | | f7f6e97d0 | fix | skip checking CommonJS module descendants | | c11a0f0d3 | fix | support custom index option paths in Vite-based dev server | | 6c3d7d1c1 | fix | update ssr option definition | | 4e89c3cae | fix | use a dash in bundle names | | 83b4b2567 | fix | use browserslist when processing global scripts in application builder | | ca4d1634f | fix | use component style load result caching information for file watching | | 34947fc64 | fix | use incremental component style bundling only in watch mode | | ec160fe4e | fix | warn if using partial mode with application builder | | 559e89159 | fix | Windows Node.js 20 prerendering failure (#26186) | | 2cbec36c7 | perf | cache polyfills virtual module result | | e06e95f73 | perf | conditionally add Angular compiler plugin to polyfills bundling | | 61f409cbe | perf | disable ahead of time prerendering in vite dev-server | | 01ab16c5d | perf | fully avoid rebuild of component stylesheets when unchanged | | 99d9037ee | perf | only perform a server build when either prerendering, app-shell or ssr is enabled | | c013a95e2 | perf | only rebundle browser polyfills on explicit changes | | e68a662bc | perf | only rebundle global scripts/styles on explicit changes | | 28d9ab88f | perf | only rebundle server polyfills on explicit changes | | 6d3942723 | perf | optimize server or browser only dependencies once | | 2e8e9d802 | perf | patch fetch to load assets from memory | | 49fe74e24 | perf | reduce CLI loading times by removing critters from critical path | | 07e2120da | perf | remove JavaScript transformer from server polyfills bundling | | c28475d30 | perf | reuse esbuild generated output file hashes | | 59c22aa4c | perf | start SSR dependencies optimization before the first request | | 223a82f5f | perf | use incremental bundling for component styles in esbuild builders | | 4b67d2afd | perf | use single JS transformer instance during dev-server prebundling |

@angular-devkit/schematics

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------- | | f600bbc97 | refactor | remove deprecated runExternalSchematicAsync and runSchematicAsync |

@angular/pwa

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | --------------------- | | 81e4917ce | fix | replace Angular logos |

@angular/ssr

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------- | | dcf3fddff | feat | add performance profiler to CommonEngine | | 6224b0599 | fix | correctly set config URL | | 8d033841d | fix | enable prerender and ssr for all build configuration | | ee0991bed | fix | enable performance profiler option name |

@ngtools/webpack

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------------------------- | | f43754570 | feat | add automated preconnects for image domains | | 4fe03266a | fix | account for arrow function IIFE | | 828030da0 | fix | account for styles specified as string literals and styleUrl | | 16428fc97 | fix | adjust static scan to find image domains in standlone components | | 486becdbb | fix | remove setClassDebugInfo calls | | 89f21ac8c | fix | remove setClassMetadataAsync calls | | 8899fb9e3 | fix | skip transforming empty inline styles in Webpack JIT compilations |

<!-- CHANGELOG SPLIT MARKER -->

<a name="16.2.10"></a>