您的开发配置没有问题。

您的生产配置有问题。

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

有很多选项可以将这些文件合并在一起:

YUI Compressor 闭包编译器 对于服务器端(我认为最好)GULP

你需要确保你只是从Angular CLI生成的项目中部署dist (distributable的缩写)文件夹。这允许该工具获取您的源代码及其依赖项，并只提供运行应用程序所需的内容。

也就是说，Angular CLI在通过' ng build——prod进行产品构建时存在/曾经存在一个问题

昨天(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

注意:目前要安装webpack版本的angular cli，你必须运行…NPM安装angular-cli@webpack -g

                                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  

*:与@angular捆绑

[参见此捆绑过程⇗]

如果你使用Angular CLI，你可以在创建项目时使用——minimal标志

ng new name --minimal

我刚刚用标志运行它，它创建了24 600个文件和ng build -prod生成212 KB的dist文件夹

所以如果你的项目中不需要饮水机或者只是想快速测试一些东西，我认为这是非常有用的

似乎没有人提到此处描述的预先编译:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

到目前为止，我使用Angular的经验是，AoT创建了最小的构建，几乎没有加载时间。最重要的是，您只需要将几个文件交付到生产环境中。

这似乎是因为Angular编译器不会随产品版本一起发布，因为模板是“提前”编译的。看到你的HTML模板标记转换成javascript指令也很酷，这将很难反向工程到原始HTML。

我做了一个简单的视频，演示了Angular应用在开发阶段和AoT构建阶段的下载大小、文件数量等——你可以在这里看到:

https://youtu.be/ZoZDCgQwnmQ

你可以在这里找到演示的源代码:

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

而且——正如这里所有其他人所说的那样——当开发环境中有许多文件时，这并没有什么问题。这就是Angular和许多其他现代框架所附带的所有依赖项的情况。但不同之处在于，当交付到生产环境时，您应该能够将其打包到几个文件中。你也不希望所有这些依赖文件都在你的git存储库中。

您的配置没有问题。

Angular(从2.0版开始)使用npm模块和依赖项进行开发。这就是你看到这么多文件的唯一原因。

Angular的基本设置包括编译器、类型依赖关系，这些仅用于开发目的。

一旦您完成了开发，您所需要做的就是捆绑这个应用程序。

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

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