如何将Angular应用捆绑到生产环境中

把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?

请在回答中包含Angular版本，以便我们在它转移到后续版本时更好地跟踪。

当前回答

请在当前项目目录下尝试以下CLI命令。它将创建dist文件夹bundle。因此，您可以上传dist文件夹中的所有文件进行部署。

Ng build——prod——aot——base-href。

其他回答

请在终端中使用以下命令

  ng build --configuration production --aot

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把我们的应用缩小很多。

只要在一分钟内用webpack 3安装angular 4，你的开发和生产ENV包就会准备好，没有任何问题只要跟随下面的github文档

https://github.com/roshan3133/angular2-webpack-starter

Ng构建——配置生产 (角度14以上)

直到今天，我仍然认为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

推荐文章