Huge number of files generated for every Angular project

Huge number of files generated for every Angular project

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 project.
I figured this is some mistake or I missed something, so I decided to use angular-cli, but after setting up the project I counted 41,000 files.
Where did I go wrong? Am I missing something really really obvious?

Solutions/Answers:

Solution 1:

There is nothing wrong with your configuration.

Angular (since version 2.0) uses npm modules and dependencies for development. That’s the sole reason you are seeing such a huge number of files.

A basic setup of Angular contains transpiler, typings dependencies which are essential for development purposes only.

Once you are done with development, all you will need to do is to bundle this application.

After bundling your application, there will be only one bundle.js file which you can then deploy on your server.

‘transpiler’ is just a compiler, thanks @omninonsense for adding that.

Solution 2:

                                Typical Angular2 Project

NPM Package                       Files (Development)                   Real World Files (Deployment)

@angular                       3,236                             1
rxJS                           1,349                             1*
core-js                        1,341                             2
typings                        1,488                             0
gulp                           1,218                             0
gulp-typescript                1,243                             0
lite-server                    5,654                             0
systemjs-builder               6,470                             0
__________________________________________________________________
Total                         21,999                             3  

*: bundled with @angular

[ see this for bundling process &neArr ]

Solution 3:

There is nothing wrong with your development configuration.

Something wrong with your production configuration.

When you develop a “Angular 2 Project” or “Any Project Which is based on JS” you can use all files, you can try all files, you can import all files. But if you want to serve this project you need to COMBINE all structured files and get rid of useless files.

There are a lot of options for combine these files together:

Solution 4:

As several people already mentioned: All files in your node_modules directory (NPM location for packages) are part of your project dependencies (So-called direct dependencies). As an addition to that, your dependencies can also have their own dependencies and so on, etc. (So-called transitive dependencies). Several ten thousand files are nothing special.

Because you are only allowed to upload 10’000 files (See comments), I would go with a bundler engine. This engine will bundle all your JavaScript, CSS, HTML, etc. and create a single bundle (or more if you specify them). Your index.html will load this bundle and that’s it.

I am a fan of webpack, so my webpack solution will create an application bundle and a vendor bundle (For the full working application see here https://github.com/swaechter/project-collection/tree/master/web-angular2-example):

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Webcms</title>
</head>
<body>
<webcms-application>Applikation wird geladen, bitte warten...</webcms-application>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

webpack.config.js

var webpack = require("webpack");
var path = require('path');

var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

/*
 * Configuration
 */
module.exports = {
    devtool: 'source-map',
    debug: true,

    entry: {
        'main': './app/main.ts'
    },

    // Bundle configuration
    output: {
        path: root('dist'),
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
    },

    // Include configuration
    resolve: {
        extensions: ['', '.ts', '.js', '.css', '.html']
    },

    // Module configuration
    module: {
        preLoaders: [
            // Lint all TypeScript files
            {test: /\.ts$/, loader: 'tslint-loader'}
        ],
        loaders: [
            // Include all TypeScript files
            {test: /\.ts$/, loader: 'ts-loader'},

            // Include all HTML files
            {test: /\.html$/, loader: 'raw-loader'},

            // Include all CSS files
            {test: /\.css$/, loader: 'raw-loader'},
        ]
    },

    // Plugin configuration
    plugins: [
        // Bundle all third party libraries
        new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),

        // Uglify all bundles
        new UglifyJsPlugin({compress: {warnings: false}}),
    ],

    // Linter configuration
    tslint: {
        emitErrors: false,
        failOnHint: false
    }
};

// Helper functions
function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

Advantages:

  • Full build line (TS linting, compiling, minification, etc.)
  • 3 files for deployment –> Only a few Http requests

Disadvantages:

  • Higher build time
  • Not the best solution for Http 2 projects (See disclaimer)

Disclaimer: This is a good solution for Http 1.*, because it minimizes the overhead for each Http request. You only have a request for your index.html and each bundle – but not for 100 – 200 files. At the moment, this is the way to go.

Http 2, on the other hand, tries to minimize the Http overhead, so it’s based on a stream protocol. This stream is able to communicate in both direction (Client <–> Server) and as a reason of that, a more intelligent resource loading is possible (You only load the required files). The stream eliminates much of the Http overhead (Less Http round trips).

But it’s the same as with IPv6: It will take a few years until people will really use Http 2

Solution 5:

You need to ensure that you’re just deploying the dist (short for distributable) folder from your project generated by the Angular CLI. This allows the tool to take your source code and it’s dependencies and only give you what you need in order to run your application.

That being said there is/was an issue with the Angular CLI in regards to production builds via `ng build –prod

Yesterday (August 2, 2016) a release was done which switched the build mechanism from broccoli + systemjs to webpack which successfully handles production builds.

Based upon these steps:

ng new test-project
ng build --prod

I am seeing a dist folder size of 1.1 MB across the 14 files listed here:

./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js

Note Currently to install the webpack version of the angular cli, you must run… npm install angular-cli@webpack -g

Solution 6:

Angular itself has lots of dependencies, and the beta version of CLI downloads four times more files.

This is how to create a simple project will less files (“only” 10K files)
https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/