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?

it's worth noting that the quickstart installs many dependencies for a functional node server which may not be necessary if you intend to use some other server technology. For example, you wouldn't install typescript or lite-server in your production environment. For starting a project quickly and seeing immediate results, it is perfect. A quickstart can't adequately cover every possible combination of server stack, so it must include something basic. You don't have to use what it includes, of course. — Claies
– Claies, Commented Jan 8, 2016 at 7:47

Community · Accepted Answer · 2017-05-23 10:30:52Z

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" },

ttugates · Accepted Answer · 2017-09-28 21:09:39Z

1

You could use ng new barebones-app --minimal

answered Sep 28, 2017 at 21:09

ttugates

6,3624 gold badges48 silver badges58 bronze badges

Comments

TheKojuEffect · Accepted Answer · 2016-01-07 10:25:59Z

0

You can remove unnecessary dependencies from package.json. Also, dependencies declared in devDependencies section is not bundled when packaging for production.

answered Jan 7, 2016 at 10:25

TheKojuEffect

21.2k20 gold badges94 silver badges127 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related