You can use them together, and it’s very easy.
First, you install Yarn. If you have it installed already, ensure that you have version 0.19.x at least to avoid issues with global packages. You check your Yarn version by running:
Then you need to ensure that the folder where Yarn writes the global packages executable files.
On Windows, the MSI installer should do it for you. For Mac, check the “Path Setup” part in the installation page.
Once done, ensure to open a new terminal after the installation, and test it.
To find what folder to look for:
echo $PATH (Mac) or
echo %PATH% (Windows command prompt) to get the PATH variable and check it.
Installing Angular CLI
OK, so yarn is installed, and it’s installed correctly. Let’s get Angular CLI:
Adding To A New Angular CLI Project
Starting from beta 31, Angular CLI added native Yarn support.
When you create a new project, the CLI goes and runs
npm install for you by default. You can tell it not to by passing a
--skip-install flag (
-si for short) like:
Note: The option was called
-sn before beta 31.
But then you’ll have to go run Yarn yourself
yarn by itself is similar to
npm install. It’ll read your
package.json file and add the packages to
node_modules as needed.
Or… you can just tell the CLI to use Yarn instead of NPM!
This way, you don’t need to do anything special when creating new projects. Just go with
ng new test-project with no special flags, and the CLI will use Yarn to install the project packages, unless you specify
This is a user-level setting. It does not affect the generated project in any destructive way. It still has a
package.json file (because Yarn works just fine with that), and anyone who doesn’t have Yarn can just run
More on that below. Before that, let’s ensure that everything worked correctly by running
npm start or
ng serve etc.
All good? Awesome!
Bonus: A Note About Git
When the Angular CLI creates the project, it initializes it as a git repository and
git adds all the files it generated. After the Yarn install, you’ll find another file
yarn.lock that’s not yet added.
Yarn team recommends adding the file to git, so, you can do just that, and then commit the result as the new project.
When you push your repository to a remote server, and someone else pulls it, they can run
yarn, or simply
npm install (because the
package.json file is still there and updated), and get going with the project.
Hopefully that was as simple as you expected it to be. If you have any questions, you can just drop me a comment here, or use any alternative way mentioned in the video.
Don’t forget to sign up for my newsletter so that I can share with you all the resources I use to learn this stuff and more.
How did I learn that?
As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.
It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2+, ASP.NET (4.x/MVC5 and Core), and other fullstack developer goodies.
Take it for a test ride, and you may unsubscribe any time.
You might also want to support me by checking these out [Thanks]: