ChatGPT解决这个技术问题 Extra ChatGPT

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?

It's normal for projects powered by NPM.
@hendrix because my deployment (google app engine) allows only 10K files
For anyone curious about the number of votes on this question and its answers, this made the HN front page. news.ycombinator.com/item?id=12209028
@hendrix - I bet you commit .DS_Store files to git as well.
I think "If your hello world app is working, everything is fine" isn't a good philosophy to follow, especially for someone who is learning. The OP is exactly right to question why so many files were created. The example itself references only 5 files. And honestly, any application that has more files than there are letters in its output should be questioned.

L
Lazar Ljubenović

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.


It also typically brings the test data and tests and build tools for the dependencies and their dependencies and so on.
A "transpiler" is just a compiler.
but compiles to another language instead of to byte code or machine code
@HunterMcMillen Byte code and/or Machine code is another language. The term "transpiler" has no additional meaning than "compiler."
With respect to all involved I'm not sure the semantics argument is really relevant to OP's question ^^
C
Community
                                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 ⇗ ]


I guess -3 were given for not doing the sum, but now I have :)
what do you mean by real world files?
@yeahman "real world files" is the number of files when your project is deployed or in production.
Also the size count, only 3 files, but they may be huge (for web)
h
hurricane

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:

YUI Compressor

Google Closure Compiler

For server side (I think it is best) GULP


You shouldn't (citation needed) be concatenating files together on the server. At most, I would use a transpiler.
@DanPantry Transpilers are source-to-source compilers. I think they can only change "X" to "JS". File counts are same.
..Yes, but I'm not sure of your point. My point is that you probably shouldn't try to minify server code (by concatenating files and thus reducing file size). At most, you should use Babel on your code if you're using bleeding features like async/await.
@DanPantry I am agree with you. But on the comments questioner says "because my deployment (google app engine) allows only 10K files". In these conditions we need to minify file counts.
I'd agree with you but OP seems to have an XY issue here
e
efirvida

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


Not necessary though, since the OP mentioned using angular-cli which already comes with a bundler (the same suggested webpack).
@mdentinho Yes, in more modern releases. But in 2016 SystemJS and CLI was the way to go (Gladly we have webpack now)
B
Brocco

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


m
maguy

Creating a new project with angular cli recently and the node_modules folder was 270 mb, so yes this is normal but I'm sure most new devs to the angular world question this and is valid. For a simple new project it would make sense to pare the dependencies down maybe a bit;) Not knowing what all the packages depend on can be a bit unnerving especially to new devs trying the cli out for the first time. Add to the fact most basic tutorials don't discuss the deployment settings to get the exported files only needed. I don't believe even the tutorial offered on the angular official website talks about how to deploy the simple project.

https://i.stack.imgur.com/Leawm.jpg


L
Lazar Ljubenović

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/


L
Lazar Ljubenović

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.


L
Lazar Ljubenović

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.


P
Pac0

If you are using angular cli's newer version use ng build --prod

It will create dist folder which have less files and speed of project will increased.

Also for testing in local with best performance of angular cli you can use ng serve --prod


S
SebOlens

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


B
Brent Bradburn

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.


My breadcrumb has gone stale, but here's what it refers to: web.archive.org/web/20150216184318/https://docs.npmjs.com/misc/…
p
piyush anwekar

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


N
Naeem Bashir

There is nothing wrong with your development configuration.

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

ng new name --minimal