Huge number of files generated for every Angular project

Question

I wanted to start a simple hello world app for Angular.

When I followed the instructions in the official quickstart the installation created 32,000 files in my proje

Answer 1

If your file system supports symbolic links, then you can at least relegate all of these files to a hidden folder -- so that a smart tool like tree won't display them by default.

mv node_modules .blergyblerp && ln -s .blergyblerp node_modules

Using a hidden folder for this may also encourage the understanding that these are build-related intermediate files that don't need to be saved to revision control -- or used directly in your deployment.

Answer 2

There is nothing wrong. These are all the node dependencies that you have mentioned in the package.json.

Just be careful if you have download some of the git hub project, it might have lot of other dependencies that are not actually require for angular 2 first hello world app :)

• make sure you have angular dependencies -rxjs -gulp -typescript -tslint -docker

Answer 3

Here is a comparison of what takes more space in angular projects.

Answer 4

if you use Angular CLI you can always use --minimal flag when you create a project

ng new name --minimal

I've just run it with the flag and it creates 24 600 files and ng build --prod produces 212 KB dist folder

So if you don't need water fountains in your project or just want to quickly test something out this I think is pretty useful

Answer 5

Seems like nobody have mentioned Ahead-of-Time Compilation as described here: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

My experience with Angular so far is that AoT creates the smallest builds with almost no loading time. And most important as the question here is about - you only need to ship a few files to production.

This seems to be because the Angular compiler will not be shipped with the production builds as the templates are compiled "Ahead of Time". It's also very cool to see your HTML template markup transformed to javascript instructions that would be very hard to reverse engineer into the original HTML.

I've made a simple video where I demonstrate download size, number of files etc. for an Angular app in dev vs AoT build - which you can see here:

https://youtu.be/ZoZDCgQwnmQ

You'll find the source code for the demo here:

https://github.com/fintechneo/angular2-templates

And - as all the others said here - there's nothing wrong when there are many files in your development environment. That's how it is with all the dependencies that comes with Angular, and many other modern frameworks. But the difference here is that when shipping to production you should be able to pack it into a few files. Also you don't want all of these dependency files in your git repository.

Answer 6

This is actually not Angular specific, it happens with almost any project that uses the NodeJs / npm ecosystem for its tooling.

Those project are inside your node_modules folders, and are the transititve dependencies that your direct dependencies need to run.

In the node ecosystem modules are usually small, meaning that instead of developing things ourselves we tend to import most of what we need under the form of a module. This can include such small things like the famous left-pad function, why write it ourselves if not as an exercise ?

So having a lot of files its actually a good thing, it means everything is very modular and module authors frequently reused other modules. This ease of modularity is probably one of the main reasons why the node ecosystem grew so fast.

In principle this should not cause any issue, but it seems you run into a google app engine file count limit. In that I case I suggest to not upload node_modules to app engine.

instead build the application locally and upload to google app engine only the bundled filesn but don't to the build in app engine itself.