Last week, I briefly touched on Yarn Package Manager in my post about 5 must have tools for angular developer. Yarn Package Manager – simply referred to as Yarn – was developed by Facebook as a replacement for Node Package Manager (NPM). Yarn has been widely adopted by Facebook for its core Projects: main Facebook app and website, Instagram, Oculus, and WhatsApp.

How to setup Yarn Package Manager and Angular CLI

To put it simply, Yarn is a better version of NPM. It offers speed, security and reliability over NPM. I have been using Yarn for a couple months now and I will not switch back to NPM anytime soon. Yarn has the same packages as NPM, you don’t have to worry about lack of packages. To install any package from NPM, just copy the name of the package and install it as follows (replace package-name with the name of the package):

yarn add package-name

Is it Compatible with Angular CLI?

Angular CLI is another tool that helps you manage your angular project. It helps you create, build, generate components, services and others for your project. By default, it uses NPM for package management but it also supports Yarn.

How to Install Yarn Package Manager

To install yarn package manager, you need to head to the following webpage. Download and follow the instruction specific to your Operating System.

Yarn is available for Windows, Linux and MacOS. Once you have successfully installed Yarn. (You can test by running the command below, it will give you the yarn version number)

yarn -v

You can now set Angular CLI to use yarn by running the command below. This will change the default package manager from NPM to yarn globally. For Angular 5 and below, use the following command:

ng set --global packageManager=yarn

NB: For Angular 6 and above, use the following command:

ng config -g cli.packageManager yarn

Now, any new project you start with Angular CLI will be using Yarn instead of NPM. If you have an existing project and would like to switch to yarn, you will need to install all NPM packages into yarn lock file. Just run the command below, it won’t interfere with your NPM packages as it depends on them.

yarn install

How to setup Yarn Package Manager for Angular

Installing Packages Using yarn

To install packages using Yarn is rather simple. Find or take any NPM package name and add it using yarn add command as indicated below:

yarn add package-name-1 package-name-2 …

i.e.

yarn add @ng-bootstrap/ng-bootstrap

Other Commands

Starting a new project
yarn init
Adding a dependency
yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]
Adding a dependency to different categories of dependencies

Add to devDependencies, peerDependencies, and optionalDependencies respectively:

yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional
Upgrading a dependency
yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]
Removing a dependency
yarn remove [package]
Installing all the dependencies of project
yarn or yarn install

Revert to NPM

In case you are unimpressed with yarn or you find the change of command hard to take, you can revert to NPM with the command below. For Angular 5 and below:

ng set --global packageManager=npm

NB: For Angular 6 and above:

ng config -g cli.packageManager npm