What is node_modules directory in AngularJS?

Question

I am exploring AngularJS tutorial project and found it has node_modules directory inside, which size if 60 megabytes.

Does simple clientside javascript project really need so huge corpus of unknown data?

I tried to delete this directory and project still works. I suspect it somehow relates with node.js and it's npm but how? Suppose I need to run my project on some conventional web server (not node.js), then how to know, which files/directories are unneeded?

Many javascript libraries require to use bower to install them. If I use bower, does this mean I need to keep node_modules?

Solution 1

The node_modules directory is only for build tools.

The package.json file in the app root defines what libraries will be installed into node_modules when you run npm install.

Very often with an angular app, on your dev machine or on a build server, you use other Javascript libraries from npm (a node.js package manager) to build your angular app. Tasks can be concatenating resources, using CSS preprocessors like LESS or SASS, minification, replacing of values, etc. etc. The most common tools for managing and running these tasks are called grunt and gulp, which are installed through npm as well.

When you deploy your app, you only distribute the resulting build, not any of the source files or build tools.

It is of course possible to write an AngularJS app without building anything.

edit from comments: When you dive into Angular more, there are more advanced techniques of using libraries installed by npm even in the client app, you then selectively choose the ones you need, not the whole 50MB+ thing. I'd recommend staying with the basic approaches until you get a good grasp on them though.

Solution 2

NPM is the node package manager, which installs packages locally into a project, specifically, into the node_modules folder. From there the package code can be included into a project, yes, can is the important word there.

The browser has no way to include modules in code (yet), so you need to use a library that can expose node's commonJS style modules. Browserify and Webpack are two popular methods of doing so.

Angular complicates this by introducing its own module system, which more closely resembles AMD-style modules. There are ways around this, so that you can use node-style modules, maybe your project uses those.

Using npm for managing dependencies is a great idea, its a fantastic package manager. It is likely in your case though that the project is only built using node and that the node_modules folder contains dependencies only related to the build.

Comments

[vvondra]

Yes, you can. Given the context of the question, it seems too confusing diving into that direction. It's not something you'll encounter in a getting started guide.

[vvondra]

Misleading was not the goal, added the comment to the answer.