ng-add

Add a package to the current project

$ ng add [package]

$ ng add [package1 package2 ...]

$ ng add [package]@[version]

$ ng add [package] --skip-confirmation

$ ng add [package] --interactive false

$ ng add [package] --verbose

$ ng add [package] [[-d|--dry-run]]

ng add <package> [options]

--collection
    The schematic collection to use for the installation process.

--registry
    Specifies a custom npm package registry to use instead of the default.

--verbose
    Adds more detailed output to the console, useful for debugging installation failures.

--dry-run
    Reports the changes that would be made to the file system without actually applying them.

--force
    Forces the installation and schematic execution even if the library is already present or there are version conflicts.

--skip-confirmation
    Skips the interactive prompt that asks for user permission before executing the library's schematic.

The ng add command is a specialized utility within the Angular CLI used to integrate new libraries into an existing workspace. Unlike traditional package managers that only download files, ng add automates the initial setup process by executing a 'schematic' provided by the library author. This process typically involves installing the package via npm or yarn, updating the angular.json configuration, importing required modules into the application root, and sometimes generating boilerplate code or styles.

By using this command, developers can avoid manual configuration errors and ensure that the library is installed according to the author's best practices. It is commonly used for adding complex frameworks like Angular Material, state management tools, or Progressive Web App (PWA) support. The command effectively bridges the gap between installation and configuration, making the Angular ecosystem more modular and easier to extend.

The ng add command relies on the library providing a valid schematic. If a package does not contain an ng-add schematic, the command will simply install the package using the default package manager without performing any automated configuration. It is highly recommended to have a clean git working directory before running this command, as it can modify multiple files at once.

The command automatically detects the preferred package manager (npm, yarn, or pnpm) by checking for lock files in the project root. It will use the detected tool to download the requested package before initiating the schematic.

When no version is specified for the package, ng add attempts to find a version of the library that is compatible with the version of @angular/core currently used in the project.

Introduced in Angular CLI version 6.0, this command was part of a major effort to improve developer productivity through the Schematics workflow engine. It standardized the way third-party developers contribute to the Angular ecosystem by providing a formal API for project transformations.

ng(1), npm(1), yarn(1), pnpm(1)