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.

14 thoughts on “Working offline with angular-cli

  1. Maor Elimelech

    Thanks for the very detailed article Yuval.
    I want to present another solution which works for me and i think it’s more native solution and less tricky one.
    steps:
    1. Clone or download the angular-cli repository from https://github.com/angular/angular-cli to local folder in your pc.
    2. Open cmd, navigate to “angular-cli” folder and run ‘npm install’. the npm will download all the dependencies and now we have node_modules folder with all the packages we need.
    If you need to install angular-cli locally, just run ‘npm link’ (make sure your current folder is ‘angular-cli’ folder) and that’s it npm will install the package globally from this path.
    In case you want to install the package in offline pc , simply move the repo (with the node_modules) to this pc, navigate to the angular-cli folder and run the command ‘npm-link’ there.
    In some cases the npm link command install the package but not globally. to solve this case just do it manually at Environment Variables in windows settings.
    Add the path : C:\Users\**YourUserName**\AppData\Roaming\npm
    watch the tut in the next link:

    • Yuval Bar Levi Post author

      Hi Maor,
      It’s an interesting solution, thank you.
      It seems like a good one if you don’t want to mess around with your cache folder.
      It worth mentioning that angular-cli team recommends a similar process in case you would like to play around with angular-cli code itself, and what npm link actually do.

      Personally I find my caching solution comfortable since I now use it for more than angular-cli.
      Since I’ve set a permanent cache reference,
      Whenever I want to add a package to my offline machine I simply install and copy my cache folder,
      And able to use it with the standard npm commands.

    • Amir

      Thank you Maor for posting this alternative! I do appreciate your help to address the following issue:
      I followed the instruction and tried to create a new project (sample01) via “ng new sample01” command on a computer that has not Internet access, but the project is not created properly. It creates the related source files in the “sample01/src/app” folder and then stalls at “Installing packages for tooling via npm”. It still tries to connect to repository to download the required files.

      I manually copied the “node_modules” from the “angular-cli-master” project to sample project but it still does not work! Any idea what is not being done correctly?

      • Yuval Bar Levi Post author

        Hi Amir,
        Have you tried to create a project with “ng new” on your online machine and copy the node_modules from there (instead the one from angular-cli-master)?

        • Amir

          Hi Yuval,
          I followed Maor’s approach and downloaded angular-cli from https://github.com/angular/angular-cli , move to angular-cli folder, run the “npm link” from command line. Then created a new project via “ng new sample01” and copied the angular-cli and sampe01 projects to the box which is offline.
          Moved to angular-cli and run “npm link”. Moved to sample01 project and run “ng serve”.
          We have IE 11 and Firefox 49 on our offline environment. The sample01 project works on Firefox but not on IE. I think the IE issue is related to IE browser setting. When opening in IE it just shows “loading …”. These are separate issues and I can continue doing our development.
          I also tried the first approach and configured via permanent cache setting. But after using “ng new”, it still tries to connect to repositories.
          Thank you very much for your follow up.

          • Yuval Bar Levi Post author

            Hi Amir,
            In order to use the `ng new` command offline, you should do it on your online machine first and only then copy the cache, this way it will include the packages angular-cli will fetch for the `ng new` command.

            I’ve specified it in the “One time installation method” section (step 1 – cache it)

    • Yuval Bar Levi Post author

      Not sure I’ve understand you correctly, but I’ll try to answer:

      For using the `ng new` command, the easiest way is to set user level cache configuration. see the Permanent cache setting section.
      In some early version the `new` command might fail at some point, so simply run `npm install` command from the newly created project folder afterward.

      Most of the other @angular/cli commnad (generate, serve etc.) require no special treatment in offline environment.
      Hope it answer your question.

    • Yuval Bar Levi Post author

      Well, if you change your npm settings it should be enough for angular/cli as well.
      See Permanent cache setting section.

  2. Hod

    Thanks, it was very helpful.
    In addition, if the offline computer connected to standalone network the next issue could be important too.
    I’ve got a case that some of the users at the standalone network had more privileges than others, and only on their computer the installation of the @angular/cli possible (by the above post way).
    So, after some tries I’ve found the next solution:
    1. copy the ng and ng.cmd files from nodejs dir at their computer to my nodejs dir.
    2. copy the @angular dir from npm/node_modules dir to my computer.

    • Yuval Bar Levi Post author

      Hi Noah,
      It seems like something is missing in your cache.
      The reason might be:
      1. Different OS or other environmental differences. Some node packages like node-sass can differ from one operation system to another. Make sure to get your cache from environment similar to your offline machine.
      2. Installation went “wrong” in the sense it did not cache everything you need.
      Make sure to do cache clean before you start, and to install @angular/cli on a clean folder.

Leave a Reply