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

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


当前回答

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

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

其他回答

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

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

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

Steps to production

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

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

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

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

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

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

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