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):
yarn add package-name
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.
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. 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.
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 …
yarn add @ng-bootstrap/ng-bootstrap
yarn add [package] yarn add [package]@[version] yarn add [package]@[tag]
Add to devDependencies, peerDependencies, and optionalDependencies respectively:
yarn add [package] --dev yarn add [package] --peer yarn add [package] --optional
yarn upgrade [package] yarn upgrade [package]@[version] yarn upgrade [package]@[tag]
yarn remove [package]
yarn or yarn install
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