Thank you for reading my blog posts, I am no longer publishing new content on this platform. You can find my latest content on either mainawycliffe.dev or All Things Typescript Newsletter (✉️)
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)
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
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
yarn init
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
Angular and Bootstrap 4 are arguably the best frameworks out there, though will different purposes. Angular was developed by Google as a …
Read MoreWhether you are a new or an experienced Angular developer there are several useful tools to help make your life much easier. Whether you are …
Read MoreIf you are a fan of Angular, there is some good news, Angular 5.0 will be released on 23th October – that’s next week. If you are wondering …
Read MoreIt’s been almost two weeks since I decided to switch to Angular 4 for my incomplete project from AngularJS. If you have seriously considered …
Read More