Working offline with angular-cli

Update: package name changed from angular-cli to angular’s standard:@angular/cli
Working with Angular-CLI is awesome.  That being said, We did run into some issues running with it offline:

1. You need to install it globally.
2. Due to it’s structure, at cannot be packed and migrated like any standard node package.

 

My aim was to be able to work with ng-cli as I work with it on my online computer:

1. Create new projects
2. Work with ng standard commands like serve, generate, test etc.
3. Upgrade Angular-CLI easily

 

The short story – how to install and update Angular-CLI offline

The idea is to force npm to use a cache folder instead of looking for packages online.

 

One time installation method:

1. Cache it – on your online machine install Angular-CLI globally.

npm i @angular/cli -g

If you intend to start a new project on your offline machine, then start a new project at a location of your choosing (doesn’t really matter where, it can be deleted later).

ng new myproject

2. Move it – find your local npm cache folder, and archive it. Then burn it to disk / copy to your disk on key or whatever movable media you are using.

3. Install it – on your offline computer unarchive the cache folder and run the following command (use your cache folder path):

npm i @angular/cli -g --cache MY_CACHE_FOLDER --cache-min 999999999 --no-shrinkwrap

• For installing locally simply skip the -g flag.
• For setting permanent cache config (allowing you to use the standard npm install command the without extra flags) see – permanent cache setting

That’s it – now you have a working Angular-CLI copy on your system.

 

Permanent cache setting

If you are to repeat step 3 this process more than once or if you want to use ng new
command, a permanent cache settings at the user level would be useful. From terminal type the following:

npm config set cache PATH_TO_CACHE_FOLDER
npm config set cache min 999999999
npm config shrinkwrap false

Now you can use npm install command without the cache flags, and the ng newcommand. Npm will now use the provided cache folder instead of online repositories.

 

Updating Angular-CLI:

If you want to update Angular-CLI for existing project, follow the Angular-CLI update guide, and simply use the method described above for installation.

Make sure you skip the step which clean your cache – do not run the cache clean command.

 

The long story – why did I install it this way?

As mentioned above, we ran into some issues migrating ng-cli to new systems,  So we can treat this article as a case-study about migrating complex npm packages.

 

Consider the following scenario:

You have a project created by Angular-CLI. After working on it for some time you have to move your project to an offline computer and keep working on it without internet access.

This is a real world scenario. You might need to do that in cases you want to write code on internal network of an organization, isolated from the outside world , or when making a presentation for conventions and events when the Internet access might be not as good as you’re used to work with.

Migration itself may be simple for a project in early stages, and simply copying your files to the offline machine might be enough for many cases. On the other hand, installing node packages offline may present some issues.

Solutions for working offline with npm vary from simple and manual solutions like the using npm cache through things a bit more robust like npmbox to complex self maintained repository servers like sinopia (see a short comparison below).

For our case study let’s assume you wouldn’t like to use a dedicated server for this matter (If you work by yourself it probably be an overkill), but rather migrate the packages in an easy hassle-free way. While npmbox is useful for most cases like these, it wouldn’t work with Angular-CLI. That is because Angular-CLI doesn’t work as the common node package: it’s installation requires installing Angular-CLI inner packages, which have their own dependency requirements. As such, even when using archive tools like npmbox, or even npm pack action, it might not include everything you really need for installation.

The solution is actually a simple one: Cache your packages, copy the cache folder to the offline machine, than force npm to use that cache folder instead of accessing the internet.

 

Step 1 : Cache it

For the same reason we mentioned above, a simple npm cache add action wouldn’t do the trick, and this will be discovered sadly, only on your offline machine.

Instead we can simply install Angular-CLI (or any other package for that matter) and on our online machine copy the cache folder. You can clean (e.i. delete the current content of) the cache folder with npm cache clean command before starting this process, but it is not mandatory.

For updating npm cache folder a simple

npm install @angular/cli command will do the trick. You can then check your npm cache using npm cache ls command. You should see @angular/cli there, along with a bunch of other dependencies it requires for the installation.

Step 2: Move it

Now its the time to copy the cache. Your cache folder would be different if you using windows or a unix based OS. See npm documentation about cache folder.

Simply copy this folder to your offline machine.

Obviously, you’ll need nodejs + npm on the offline machine as well, so if not already installed, it would be a good time to download the nodejs installer, copy and install it to your offline machine as well.

Step 3: Install it

So, now for the magic itself.

Create a folder and copy your cache-folder from step 2 into it.

Let’s assume this is the newly created folder called “my_project“

and your cache folder called “my_cache_folder“.

From the terminal change the working directory to my_project

and run the following command:

npm i @angular/cli --cache my_cache_folder --cache-min 999999999 --no-shrinkwrap

for installing globally use the same command with the addition of the -g flag:

npm i @angular/cli --cache my_cache_folder --cache-min 999999999 --no-shrinkwrap -g

and that’s it!

let’s break down the command we’ve just used.

--cache

This will set the location of the cache folder used by npm.

In our case we named it my_cache_folder

--cache-min

Sets the minimum time (in seconds) to keep items in the registry cache before re-checking against the registry. We simply used a large number to tell npm to use the cache folder and skip re-checking against the repository.

--no-shrinkwrap

Shrinkwrap  command locks down the versions of a package’s dependencies. While being used it look for specific package versions. As we do not have control on package’s shrinkwrap files and requirements, in some cases letting npm use shrinkwrap mechanism may mess up your installation, since it is a cache-based offline installation.

At this time, this method will work for Angular-CLI even without having to turn off shrinkwrap mechanism, but since Angular-CLI still in early stages, it might be a good practice to turn it off anyway.

We’ve used this method for Angular-CLI for the reason mentioned above, but you can use it for any package, or several ones.

You can simply install all the packages you would like on your online machine and then copy the cache folder.

If you intend to install many packages offline one by one in this way (let’s say, for a presentation), you might want some more permanent solution.

You can set this configuration at the user level, using the following commands:

npm config set cache PATH_TO_FOLDER\my_cache_folder
npm config set cache min 999999999
npm config shrinkwrap false

you can look at your new configuration by typing:

npm config ls

Or, if you prefer to have this configuration at the folder level, you can edit your

.npmrc file for a specific folder of a project (if not exist – simply create empty file with this name). Add the following lines to the .npmrc

file:

cache=PATH_TO_FOLDER\my_cache_folder
cache-min=999999999
shrinkwrap=false

 

Solutions comparison

I’ve searched for the simplest, less techi solution in order to avoid too much dependence on IT teams (many times, we just need to setup a small project on our client’s computers, and have no experience with their IT team).

 

Here’s a (totally shallow) comparison of tools I’ve tried:

 

Offline-npm
Seems like a nice tool for working offline on the same machine, like when traveling. For migrating packages different solutions like npmbox may prove to be more useful

Npmbox

This actually a great tool for migrating most packages to offline machine, and the repository includes a guide how to install npmbox itself on offline machine manually. Although it was not useful in the special case of Angular-CLI package, this guide did help me a lot in finding the cache-based solution I’ve described here.

 

Nexus

Nexus is a great, open source repository manager not only for npm, but for other package managers and tools (like bower and maven) as well. It have some useful features (It’s a etc.) server which can serve many machine, can serve private packages for internal organization usage) and was seems like a reasonable solution in early stages. it did present some issues in deployment and maintenance. The one issue which make me look for a different solution was: you cannot migrate a single package at a time – Nexus save all your packages into a blob file, and you have to copy it entirely when you need to add a package to your offline nexus instance.

 

Sinopia

A Private npm repository server. Like Nexus it can serve many machines and serve private packages. After the unsuccessful try with nexus I’ve focused on simpler solution, so I did not dig into it too much, but it might prove to be a useful solution as well, specially if you work in a team.

 

Npm itself

As mentioned above, npm itself contain commands which supposed to help you to cache packages, like npm cache add or migrate them as tarball with npm pack (which can then be installed using the standard npm install command). As mentioned before, none of these techniques were useful in the special case of Angular-CLI structure.