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

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


当前回答

请在终端中使用以下命令

  ng build --configuration production --aot

其他回答

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

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

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

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

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

Angular CLI 1.x。适用于Angular 4.x。x 5. x.x)

这支持:

角2。X和4.x 最新Webpack 2.x Angular AoT编译器 路由(正常和惰性) SCSS 自定义文件捆绑(资产) 额外的开发工具(linter,单元和端到端测试设置)

初始设置

ng new project-name --routing

你可以添加——style=scss来支持SASS .scss。

你可以添加——ng4来使用Angular 4而不是Angular 2。

创建项目后,CLI会自动为你运行npm install。如果你想使用Yarn,或者只是想查看项目框架而不安装,请在这里检查如何做到这一点。

包的步骤

在项目文件夹内:

ng build -prod

在当前版本中,您需要手动指定——aot,因为它可以在开发模式中使用(尽管由于速度慢,这是不实际的)。

它还为更小的包执行AoT编译(没有Angular编译器,而是生成编译器输出)。如果你使用Angular 4, AoT的包会更小,因为生成的代码更小。 你可以在开发模式下用AoT测试你的应用(source cemaps, no minification),通过运行ng build——AoT测试你的应用。

输出

默认的输出目录是。/dist,尽管可以在。/angular-cli.json中更改。

部署文件

构建步骤的结果如下:

(注意:<content-hash>指的是文件内容的hash /指纹,这意味着是一种缓存破坏方式,这是可能的,因为Webpack自己写脚本标签)

。/ dist /资产 原样从。/src/assets/**复制的文件 / dist / index . html 从。/src/index.html,添加webpack脚本后 源模板文件可以在。/angular-cli.json中配置 / dist / inline.js 小型webpack加载器/ polyfill / dist /主要。< content-hash > .bundle.js 主.js文件,包含所有生成/导入的.js脚本 。/ dist /风格。< content-hash > .bundle.js 当你为CSS使用Webpack加载器时,这是CLI的方式,它们是通过JS加载的

在旧版本中,它还创建了gzip版本来检查它们的大小,以及.map源地图文件,但这不再发生,因为人们一直要求删除这些文件。

其他文件

在某些情况下,你可能会发现其他不需要的文件/文件夹:

/ out-tsc /。 从/ src / tsconfig。json的outDir / out-tsc-e2e /。 从/ e2e / tsconfig。json的outDir / dist / ngfactory / 来自AoT编译器(在beta 16中,不使用CLI就无法配置)

你可以在github上使用 angular-cli-ghpages

请查看链接,以了解如何使用此cli进行部署。

部署的网站通常会存储在github的某个分支中

gh-pages

使用可以克隆git分支和使用它像静态网站在您的服务器