There are situations when an ability to generate new Angular CLI projects from the locally installed packages is quite useful, for example:
- You’re running a live workshop at a conference in a hotel and the students have to install project dependencies multiple times. When 20-30 people are installing Angular dependencies at the same time on a hotel’s connection, it can take three minutes or more.
- You’re on a long flight and want to try something new with Angular.
In this post, I’ll show you how to generate Angular CLI projects in a disconnected mode.
First of all, I don’t use npm. I use Yarn for two main reasons:
- Yarn is faster than npm (including npm 5).
- Yarn creates a file yarn.lock that keeps track of the exact version of packages installed.
For example, if package.json has a dependency “@angular/core”: “^5.0.0”, running yarn install today would include the version of 5.1.0 of this package. If you want to make sure that all devs in your team use this version even after 5.2.0 is available, push yarn.lock in the source control repo, and everyone who pulls the code will get 5.1.0. Reproducible builds are guaranteed. While npm 5 also creates a file package-lock.json, it doesn’t guarantee the same versions for all developers.
To configure Yarn as a default package manager for Angular CLI, run the following command:
ng set --global packageManager=yarn
Now let’s see how to create a local directory (a.k.a yarn offline mirror) with cached packages so Yarn can use it without the need to connect to the Internet.
Perform the following steps before boarding the plane while the Internet connection is still available.
1. Configure a directory for locally cached packages by running this command:
yarn config set yarn-offline-mirror ~/npm-packages-offline-cache
This will create a file .yarnrc in the user’s directory on your computer. In my case (I use MAC OS), this command creates the file .yarnrc with the following content
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. # yarn lockfile v1 lastUpdateCheck 1512857190418 yarn-offline-mirror "/Users/yfain11/npm-packages-offline-cache"
2. Generate a new project with Angular CLI without installing dependencies:
ng new hello-cli --skip-install
3. Copy the file .yarnrc into the newly generated directory hello-cli
4. Change directory to hello-cli:
cd hello-cli
5. Install the project dependencies using Yarn:
yarn install
Important: Make sure that there is no file yarn.lock in hello-cli when you run this command for the first time.
This command not only will install dependencies in the node_modules directory but will also create a directory npm-packages-offline-cache in your user’s directory. This directory will contain about a thousand of compressed package files required for the offline installation. These are gzipped files with extension .tgz. This is your Yarn offline mirror with npm packages.
6. Just in case, clear the existing yarn cache to make sure we’ll be using only the files from the mirror:
yarn cache clean
Now let’s board the plane. Turn off the wi-fi or unplug the network wire. Our aircraft is airborne.
In the hello-cli directory, run the following command:
yarn install --offline
Yarn will install all the dependencies from the offline mirror. Now you can create as many Angular CLI projects as you need without being connected:
1. Generate a new project:
ng new hello-cli2 --skip-install
2. Copy the file .yarnrc into the hello-cli2 directory
3. Change to the project directory
cd hello-cli2
4. Run the offline installation of the project dependencies
yarn install --offline
Have a safe flight!
P.S. If you’re running a workshop, have a flash drive with the yarn offline miror directory and ask the participants to copy it into their user’s directories. Then they’d just need to run a command to create the .yarnrc file as explained in step 1.
Cool Tipp!
You write: “While npm 5 also creates a file package-lock.json, it doesn’t guarantee the same versions for all developers.”
In our project, we are using npm shrinkwrap for locking the versions for all developers of the project. Do you see any disadvantages of this approach?
The disadvantage is that you need to use an additional package to fix what was supposed to be working from the get-go. You can read more about the npm’s package-lock issue here: https://github.com/npm/npm/issues/17979
Thanks a lot!
Thank you, Yakov! Great article.
Just one correction: `yarn cache clean` (instead of clear)
https://yarnpkg.com/en/docs/cli/cache
Thanks, corrected.
Instead of a flash drive you could use a local registry like verdaccio or Nexus to cache and provide these packages.
Hi Yakov,
I tried all the steps mentioned in this article but when i did ‘yarn install –offline’ it gives me following error.
info No lockfile found.
[1/4] Resolving packages…
error An unexpected error occurred: “ENOENT: no such file or directory, scandir ‘C:\\Users\\A0707515\\AppData\\Local\\Yarn\\Cache\\v1\
pm-@angular'”.
info If you think this is a bug, please open a bug report with the information provided in “C:\\jr\\__UPointNext\\NextGen-v2\\hello-cli-demo
1\\yarn-error.log”.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Please guide me on this.
Thanks,
Jignesh
Seems like a bug or a disk space issue https://github.com/yarnpkg/yarn/issues/4563
merci, c’est tres utile pour moi