How to start Angular2 project with minimum of required files using npm?

Question

I was following Angular2 quickstart and installed required libraries using Node package manager: https://angular.io/guide/quickstart

created a package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }

Executed

npm install

But npm install command downloads a lot of files for instance "node_modules\angular2" is 32MB (probably raw sources and other stuff included?), allthough index.html requires only few of them and for instance angular2.dev.js is only 1MB:

<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

I would like that quickstart project doesn't take this much disk space. Is there a way to tell npm to download only "bundles" or minimized versions, or is there a way to optimize node_modules directory when packaging for production?

Answer 1

You can use the cdn versions of those files and use node_modules in development and don't include them in production at all:

<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

Take a look at this question and the comments in the answers: Angular 2 required libraries

Also this is the smallest package.json you can get away with (depending in your setup):

{ "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6" } }

I'm using Webstorm which starts its own server and compiles typescript on its own when it detects the tsconfig.json file.

So if you don't have your own server you'll need to add the lite-server dependency, config and scripts, and if you don't have a ts compiler you'll have to add the typescript dependency and scripts as well:

"devDependencies": { "typescript": "^1.7.3" },