Question

我想为Angular创建一个简单的hello world应用程序。

当我按照官方quickstart中的说明操作时，安装程序在我的项目中创建了32,000个文件。

我认为这是一个错误或者我错过了什么，所以我决定使用angular-cli，但在设置项目后我计算了41,000个文件。

我哪里出错了？我错过了一些非常明显的东西吗？

Answer 1

您的配置没有任何问题。

Angular（自2.0版开始）使用npm模块和依赖项进行开发。这是你看到如此大量文件的唯一原因。

Angular的基本设置包含仅用于开发目的的必需的transpiler，typings依赖项。

完成开发后，您需要做的就是捆绑此应用程序。

捆绑您的应用程序后，只有一个bundle.js文件可以在您的服务器上部署。

'transpiler' 只是一个编译器，感谢@omninonsense添加它。

Answer 2

                                Typical Angular2 Project

NPM套餐 文件（开发） 真实世界文件（部署）

@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 ⇗]

Answer 3

您的开发配置没有任何问题。

生产配置出现问题。

当你开发一个＆＃34; Angular 2项目＆＃34;或＆＃34;任何基于JS＆＃34;你可以使用所有文件，你可以尝试所有文件，你可以导入所有文件。但是如果你想为这个项目服务，你需要 COMBINE 所有结构化文件，并摆脱无用的文件。

将这些文件组合在一起有很多选项：

YUI Compressor
Google Closure Compiler
对于服务器端（我认为最好）GULP

Answer 4

正如几位人士已经提到的：node_modules目录中的所有文件（包的NPM位置）都是项目依赖项的一部分（所谓的直接依赖项）。除此之外，您的依赖项还可以拥有自己的依赖项等等（所谓的传递依赖项）。几万个文件没什么特别的。

因为你只允许上传10＆000; 000文件（见评论），所以我会选择捆绑引擎。该引擎将捆绑您的所有JavaScript，CSS，HTML等，并创建一个捆绑包（如果您指定它们，则创建更多捆绑包）。您的index.html将加载此捆绑包并将其加载。

我是webpack的粉丝，所以我的webpack解决方案将创建一个应用程序包和一个供应商包（对于完整的工作应用程序，请参见此处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));
}

优点：

完整构建线（TS linting，compiling，minification等）
3个部署文件 - ＆gt;只有几个Http请求

缺点：

更高的构建时间
不是Http 2项目的最佳解决方案（见免责声明）

免责声明：这是Http 1. *的一个很好的解决方案，因为它可以最大限度地减少每个Http请求的开销。您只需要index.html和每个包 - 但不能包含100 - 200个文件。目前，这是要走的路。

另一方面，Http 2尝试最小化Http开销，因此它基于流协议。该流能够在两个方向上进行通信（客户端＆lt; - ＆gt;服务器），并且作为可以进行更智能的资源加载的原因（您只加载所需的文件）。该流消除了大部分Http开销（Less Http往返）。

但它与IPv6相同：人们将真正使用Http 2需要几年的时间

Answer 5

您需要确保只是部署Angular CLI生成的项目中的dist（可分发的简称）文件夹。这使得该工具可以获取源代码及其依赖项，并且只为您提供运行应用程序所需的内容。

有人说，通过`ng build --prod

，Angular CLI在生产构建方面存在问题

昨天（2016年8月2日）发布了一个版本，将构建机制从broccoli + systemjs切换到成功处理生产版本的webpack。

基于以下步骤：

ng new test-project
ng build --prod

我看到此处列出的 14个文件的dist文件夹大小 1.1 MB ：

./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

注意目前要安装angular cli的webpack版本，您必须运行... npm install angular-cli@webpack -g

Answer 6

Angular本身有很多依赖项，CLI的beta版下载的文件数量是其四倍。

这是如何创建一个简单的项目将减少文件（＆＃34;仅＃34; 10K文件） https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

Answer 7

似乎没有人提到过如下所述的Ahead-of-Time Compilation：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

到目前为止，我对Angular的体验是，AoT创建了最小的构建，几乎没有加载时间。最重要的是，这里的问题是 - 您只需要将一些文件发送到生产中。

这似乎是因为Angular编译器不会随生产版本一起提供，因为模板已经编译好了＃34;提前时间＆＃34;。将HTML模板标记转换为javascript指令也非常酷，这些指令很难逆向工程到原始HTML中。

我制作了一个简单的视频，其中我展示了dev和AoT版本中的Angular应用程序的下载大小，文件数量等 - 您可以在此处看到：

https://youtu.be/ZoZDCgQwnmQ

您可以在此处找到演示的源代码：

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

而且 - 正如所有其他人在这里所说的那样 - 当您的开发环境中有许多文件时，没有错。这与Angular和许多其他现代框架所带来的所有依赖关系是如何形成的。但这里的区别在于，当运送到生产时，您应该能够将其打包成几个文件。此外，您不希望所有这些依赖项文件都在您的git存储库中。

Answer 8

这实际上不是Angular特有的，几乎任何使用NodeJs / npm生态系统进行工具的项目都会发生这种情况。

这些项目位于node_modules文件夹中，并且是您的直接依赖项需要运行的过渡依赖项。

在节点生态系统中，模块通常很小，这意味着我们不是自己开发东西，而是倾向于以模块的形式导入我们需要的大部分内容。这可以包括像着名的左键功能这样的小东西，为什么不写作练习呢？

因此，拥有大量文件实际上是一件好事，这意味着一切都非常模块化，模块作者经常重复使用其他模块。这种模块化的简易性可能是节点生态系统增长如此之快的主要原因之一。

原则上这不应该导致任何问题，但似乎您遇到谷歌应用引擎文件计数限制。在我的情况下，我建议不要将node_modules上传到app引擎。

而是在本地构建应用程序并仅将捆绑的文件上传到谷歌应用引擎，但不要在应用引擎本身内置。

Answer 9

如果您使用的是角色cli的较新版本，请使用ng build --prod

它会创建 dist 文件夹，文件较少，项目速度会提高。

另外，对于具有最佳角度cli性能的本地测试，您可以使用ng serve --prod

Answer 10

如果您使用Angular CLI，则在创建项目时始终可以使用--minimal标志

ng new name --minimal

我只是用旗帜运行它，它创建24 600个文件，ng build --prod生成212 KB dist文件夹

因此，如果您的项目中不需要喷泉，或者只是想快速测试一下，我觉得这很有用

Answer 11

以下是角度项目中需要更多空间的比较。

Answer 12

如果您的文件系统支持符号链接，那么您至少可以将所有这些文件归档到隐藏文件夹 - 这样，tree等智能工具默认情况下不会显示它们。

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

使用隐藏文件夹还可以鼓励您理解这些是与构建相关的中间文件，不需要保存到版本控制中 - 或直接在部署中使用。

Answer 13

没有错。这些是您在package.json中提到的所有节点依赖项。

如果您已经下载了一些git hub项目，请注意，它可能有许多其他依赖项，而这些依赖项实际上并不需要角度2第一个hello world应用程序：）

确保您具有角度依赖关系 -rxjs -gulp -typescript -tslint -docker

Answer 14

最近用angular cli创建一个新项目，并且node_modules文件夹为270 mb，所以是的，这是正常的，但是我敢肯定大多数有角度的世界的新开发人员都对此表示怀疑并且是有效的。对于一个简单的新项目，将依赖关系减少一些可能是有意义的；）不知道所有程序包所依赖的内容可能会有些不安，尤其是对于那些初次尝试使用cli的新开发人员而言。事实是，大多数基础教程都没有讨论仅需要获取导出文件的部署设置。我什至不相信甚至有角官方网站上提供的教程也不会谈论如何部署简单项目。

Answer 15

您的开发配置没有问题。

如果您使用 Angular CLI，您可以在创建项目时始终使用 --minimal 标志

ng new name --minimal

为每个Angular项目生成大量文件

15 个答案: