One of the most infuriating parts of a new project setup is the npm install. A new Angular project from the CLI (Running \u201cng new\u201d) can even take several minutes. And even if it\u2019s an existing project that you know you have already setup, but you just want to check, a simple npm install can still take 30 seconds just to say \u201cYep all good here!\u201d.<\/p>\n\n\n\n
An option you see get thrown around often is to switch to using Yarn. Using Yarn from the command line is very similar to NPM (Infact we have a NPM vs Yarn Cheatsheet right here<\/a>!), but what you\u2019ll quickly find is that Yarn is so much more performant. The biggest reason is that Yarn has an offline global cache<\/a> on your computer so repeated installs of the same package (For example, creating new Angular projects over and over again), will simply utilize the cached version rather than downloading the package all over again over the internet. Sounds good to me!<\/p>\n\n\n\n Adding Yarn after the fact to an existing project may be relatively straight forward. But what we are actually looking for is the ability to use Yarn with the actual internal angular cli when it tries to install a package.<\/p>\n\n\n\n If you want to use Yarn globally for *all*<\/strong> Angular projects on your machine, then all you need to do is run :<\/p>\n\n\n\n This updates the .angular-config.json inside C:\\Users\\YourUser on Windows to look like so :<\/p>\n\n\n\n Sometimes you don\u2019t want to globally use Yarn, and you just want to set it up on a new project you are about to create. This can be a bit of a headache as the initial call to ng new is the the most painful part of the entire process as it will use npm to install all the base packages, even if once the project is setup you switch to Yarn.<\/p>\n\n\n\n But we have a bit of a cheatcode to get around it!<\/p>\n\n\n\n When creating our project we can run :<\/p>\n\n\n\n Where the skip install flag will actually skip over the final npm install after creating the project. From there, we can run the following command *from inside the project*<\/strong> :<\/p>\n\n\n\n Notice how we don\u2019t have the -g flag like before. This sets up yarn as the package manager for this project only. From there, we just run<\/p>\n\n\n\n And the initial install of Angular components will happen like they normally would on an ng new command, but using Yarn instead.<\/p>\n","protected":false},"excerpt":{"rendered":" One of the most infuriating parts of a new project setup is the npm install. A new Angular project from the CLI (Running \u201cng new\u201d) can even take several minutes. And even if it\u2019s an existing project that you know you have already setup, but you just want to check, a simple npm install can […]<\/p>\n","protected":false},"author":131,"featured_media":7826,"comment_status":"open","ping_status":"open","sticky":false,"template":"post-tutorial-new.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[150],"tags":[],"class_list":["post-7823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/7823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/131"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=7823"}],"version-history":[{"count":5,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/7823\/revisions"}],"predecessor-version":[{"id":13551,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/7823\/revisions\/13551"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/7826"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=7823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=7823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=7823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Using Yarn Globally<\/h3>\n\n\n\n
ng config -g cli.packageManager yarn<\/code><\/pre>\n\n\n\n{\n \"version\": 1,\n \"cli\": {\n \"analytics\": false,\n \"packageManager\": \"yarn\"\n }\n}<\/code><\/pre>\n\n\n\nUsing Yarn On A Single Project<\/h3>\n\n\n\n
ng new --skip-install<\/code><\/pre>\n\n\n\nng config cli.packageManager yarn<\/code><\/pre>\n\n\n\nyarn<\/code><\/pre>\n\n\n\n