ng add command in Angular CLI

Using ng add command in Angular CLI, we can add external packages or libraries to our angular project.

Add package name or library name followed by ng add command as shown below.

ng add <package> [options]

What does ng add command will do in Angular CLI?

ng add will use our package manager to download new dependencies and invoke an installation script (implemented as a schematic) which can update our Angular project with configuration changes and adds additional dependencies like polyfills, or scaffold package-specific initialization code.

The default project of ng command is the value of defaultProject in our angular.json file.

ng add command is built on top of schematics and the npm registry, so that any external npm packages or libraries can add their support for ng add.

ng add command introduced as part of Angular 6.0 release.

There are already few existing packages added their support for ng add command.

ng add packages examples

There are few npm packages already added support for ng add command.

1. ng add @angular/pwa : we can convert our application into a PWA by adding an app manifest and service worker
2. ng add @ng-bootstrap/schematics : we can ng-bootstrap to our angular application
3. ng add @angular/material : Adds angular material Angular Material and theming and register new starter components into ng generate
4. ng add @clr/angular : Adds VMWare Clarity to our Angular application
5. ng add @angular/elements : Adds the required “document-register-element.js” polyfill and dependencies for Angular Elements.

ng add command Arguments

ng add command will take single argument i.e., package or collection name

ng add command Options

ng add command accepts 5 different types of options

1. registry
2. help
3. interactive
4. defaults
5. verbose

And “registry” option is something specific to ng add command. Which is used to change the NPM registry.

Remaining all other options helps us to understand execution of ng add command.