请在终端中使用以下命令

  ng build --configuration production --aot

使用SystemJs生成器和gulp的Angular 2生产工作流

角。IO有快速入门教程。我复制了本教程，并扩展了一些简单的gulp任务，将所有内容捆绑到dist文件夹，可以复制到服务器并像那样工作。我尝试优化所有内容，以便在Jenkis CI上正常工作，因此node_modules可以被缓存，不需要复制。

源代码与示例应用程序在Github: https://github.com/Anjmao/angular2-production-workflow

清洁打字文件编译js文件和dist文件夹 在app文件夹内编译typescript文件 使用SystemJs捆绑器将所有内容捆绑到dist文件夹，并生成哈希值，以便浏览器缓存刷新 使用gulp-html-replace将index.html脚本替换为捆绑版本并复制到dist文件夹 复制资产文件夹内的所有内容到dist文件夹

Node:虽然你总是可以创建自己的构建过程，但我强烈建议使用angular-cli，因为它有所有需要的工作流，现在它工作得很完美。我们已经在生产环境中使用它了，在使用angular-cli时没有任何问题。

Ng服务的工作是为我们的应用程序的开发目的服务。生产方面呢?如果我们看看我们的包装。Json文件，我们可以看到有我们可以使用的脚本:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

构建脚本使用Angular CLI的ng build，并带有——prod标志。我们现在试试。我们有两种方法:

#使用NPM脚本

npm run build

#直接使用cli

ng build --prod

这次我们得到了四个文件而不是五个。——prod标志告诉Angular把我们的应用缩小很多。

“最佳”取决于场景。有时你只关心最小的单个包，但在大型应用程序中，你可能不得不考虑延迟加载。在某种程度上，将整个应用程序作为一个单一的bundle提供是不切实际的。

在后一种情况下，Webpack通常是最好的方法，因为它支持代码分割。

对于单个包，我会考虑Rollup，或者Closure编译器，如果你有勇气的话:-)

我已经在这里创建了我使用过的所有Angular捆绑器的示例:http://www.syntaxsuccess.com/viewarticle/angular-production-builds

代码可以在这里找到:https://github.com/thelgevold/angular-2-samples

Angular版本:4.1.x

直到今天，我仍然认为Ahead-of-Time Compilation烹饪书是产品捆绑的最佳食谱。你可以在这里找到它:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

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

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

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

https://youtu.be/ZoZDCgQwnmQ

你可以在这里找到视频中使用的源代码:

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

请在终端中使用以下命令

  ng build --configuration production --aot