Yarn and Angular-CLI


Background

I have been thinking of a faster package management tool ever since I started using NPM (Node Package Manager). Please don’t mistake me having anything against NPM. I still love this package manager and I very much love the rich command-line that it came with. When it was created, it was really the leader and because of this NPM the whole JS world has seen a revolution. NPM surly was the spark to the revolution in the JS (Java Script) world.
To make it clear for everyone why we needed a new package manager is because of the following challenges that we had with NPM,
1.     The Nested dependencies that was sometimes going in infinity loops. At times, it was impossible to delete files on the PC as the paths were too nested.
2.     Everything on the world had to depend on only one registry. https://www.npmjs.com/
3.     Single threaded installation. The installation of the dependencies are single threaded.
4.     You are always expected to be online even if you require the same package multiple times.
In my opinion, Yarn has made its attempts to address the above issues. I have seen some of the improvements right through my eyes and it has really made the package management a really cool thing. Kudos, to Yarn team to have built such a wonderful package management.

Prerequisite

Install the Yarn package manager. Go to https://yarnpkg.com/en/docs/install and choose the way you are comfortable with to install Yarn. It has many ways to install and I sure you will be able to install.

Install Angular CLI

Hope you were able to successfully install the Yarn package manager on your machine. Now, let us install the angular-cli globally. Issue the below command to install the angular cli using yarn package manager.
$ yarn global add angular-cli

That’s it! You just installed the angular-cli globally on your system. You should have noticed a significant improvement in the time taken to install. You should have noticed the clutter free messaging on the prompt. These really excite me as it is clean on the prompt and does a neat job.

Upgrading to latest Angular CLI

If you have already installed an older version of Angular CLI and wish to upgrade to the latest here it is.
$ yarn global remove angular-cli

$ yarn cache clean

$ yarn global add angular-cli@latest




Running script Tasks

Let’s assume you have added “scripts” inside your package.json and wish to run tasks
{

  "name": "sample",

  "version": "0.0.0",

  "license": "MIT",

  "angular-cli": {},

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },






}

You can run them like below:
$ yarn run ng

$ yarn start

$ yarn run test

If you notice the commands are very similar to that of what was done in npm.

Conclusion

After I adapted to Yarn I started seeing the world with Yarn and see considerable improvement on the build pipelines on Jenkins and my local. This might be because of me being biased towards Yarn. If you have any experience with Yarn please comment.

Comments

Popular posts from this blog

Java SSL/TLS Testing Tool: Cipher Suite

PWA: Building and publishing a PWA in 15ish minutes using Angular 5 and Service Worker