Rails’ default package manager for JS is yarn, and I like yarn because the package installation process on the China network is much more stable, and Capistrano’s support for yarn is also great.

However, Angular projects usually use npm as the default project manager. I used to believe it’s not changeable because every time I tried to switch, I failed. But yesterday, I found the correct way to do it, and here is how.

Run it in npm

Make sure the Angular project works normally in npm.

npm install
npm update
npm run start
npm run build

Import installed node modules in yarn.

This can be done via the import feature

rm package-lock.json # optional, but need it if yarn import failed
yarn import

Sync back to npm from yarn.lock

This is required to ensure Angular works after the yarn import. syncyarnlock is a tool that syncs yarn.lock versions into an existing package.json file.

npm -g install syncyarnlock
syncyarnlock -s -k
npm update
npm run start
npm run build

Run yarn update

After running yarn update, compare the yarn.lock file, add missing dependencies and devDependencies after the yarn update. I guess this is the key step to migrate from npm to yarn because npm dependencies are nested but yarn’s are flat.

yarn update
# check yarn.lock and add removed lines of the package to package.json

Now yarn works

yarn install
yarn update
yarn run start
yarn run build

You can keep package-lock.json or delete it, but your Angular project works with yarn now!