Using Angular CLI with Yarn

This article gives a brief overview of how to setup your Angular CLI to use Yarn and how to get back to NPM package manager

Introduction

The Angular CLI is using NPM (Node Package Manager) by default when creating or upgrading Angular applications using the following commands:

• ng new <name>
• ng add <options>
• ng update <options>

The project root folder gets the package-lock.json file added or updated as well.

Using Yarn with Angular CLI

Use the following command to instruct the Angular CLI to use Yarn for all its commands:

ng config -g cli.packageManager yarn

The CLI is going to use Yarn, and yarn.lock file gets generated in your project root folder.

Project-specific settings for Yarn

You can also use custom package manager only in the scope of the particular project. Use the command without -g (global) flag in the project root folder:

ng config cli.packageManager yarn

Using NPM with Angular CLI

If you want to revert the changes and use the NPM with the Angular CLI again, use the following command:

ng config -g cli.packageManager npm

You may also want to remove the yarn.lock file and run the npm install command to generate the package-lock.json file.

Project-specific settings for NPM

Similar to the Yarn examples, you can use the same configuration command without the -g (global) flag to configure only the current project:

ng config cli.packageManager npm

Updating angular.json

The project-specific settings for the Angular CLI are stored within the angular.json configuration file in the root folder of your project.

{
  "cli": {
    "packageManager": "yarn"
  }
}

You can change it to one of the supported values: yarn, npm, cnpm, or pnpm.