Using yarn with Angular CLI

When running ng new the Angular CLI uses npm as the default package manager. In this tutorial you will learn how you can set a different package manager so that your project gets created with the correct lock file.

This tutorial should work for Angular version 6 and higher

Configure the package manager

To enable yarn for Angular CLI you have to run the following command:

ng config -g cli.packageManager yarn

Additionally, Angular CLI has support for cnpm, a package manager that works behind the Chinese firewall. As expected, you can activate it with this command:

ng config -g cli.packageManager cnpm

If at any point you want to revert back to npm run this:

ng config -g cli.packageManager npm

Global Angular CLI config file

Because we passed in the -g flag in our ng config command, the changes are stored in the global Angular CLI configuration. If for whatever reason you like to change the package manager for the current project only, you can simply leave out the -g flag.

The global configuration file is stored in <YOUR_HOMEDIR>/.angular-config.json and in the snippet below you can see how the settings are stored.

$ cat ~/.angular-config.json
{
  "version": 1,
  "cli": {
    "packageManager": "yarn"
  }
}

Thanks!

Thanks for reading my article, I hope it was useful. Feel free to reach out and follow me on Twitter or leave a comment on DEV! 🐝