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.
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):
Yan 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)
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.
ng set --global 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.
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
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.
ng set --global packageManager=npm