See how ng-add takes all the hassle out of adding a new library to your Angular project

Wouldn’t it be great if you could type: ng add @angular/pwa and skip all the manual configuration? Guess what… now you can! ng-add takes all the hassle out of adding a new library to your Angular project.

Yesterday I introduced ng update. Today I’m introducing another new CLI action: ng add

Here’s an example of the problem… if you want to add PWA support to an existing Angular app there is a long list of steps you need to follow (click here to see what I mean).

ng add <package> makes it easy to add new capabilities to your project. It will use your package manager to download new dependencies and invoke an installation script (implemented as a schematic) which can update your project with configuration changes, add additional dependencies (e.g. polyfills), or scaffold package-specific initialization code.

Angular 6 ships with support for PWA, ng-bootstrap, Angular Material, Clarity (from VMWare) and Angular Elements.

ng-add is built on top of schematics and the npm registry. The Angular team are hoping the community will help them to build a rich ecosystem of supporting packages.

Take a look at Angular Material’s ng-add schematic for an example to help you get started building your own ng-add schematics.


Upgrade to Angular is a daily bite-size newsletter containing Angular newsanalysis and advice by Darryl Brown.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.