你如何部署 Angular 应用程序？

Question

一旦 Angular 应用程序进入生产阶段，你如何部署它们？

到目前为止，我所看到的所有指南（甚至在 angular.io 上）都依赖于 lite-server 来提供服务，browserSync 来反映变化——但是当你完成开发时，你如何发布应用程序？

我是在 index.html 页面上导入所有已编译的 .js 文件还是使用 gulp 缩小它们？他们会工作吗？在生产版本中我是否需要 SystemJS？

原文由 Joseph Girgis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您实际上在这里将两个问题合二为一。

第一个 是 如何托管您的应用程序？ .

正如@toskv 提到的那样，它的问题实在是太宽泛了，无法回答，并且取决于许多不同的事情。

第二个 是 如何准备应用程序的部署版本？ .

您在这里有几个选择：

1. 按原样部署。就是这样 - 没有缩小、连接、名称修改等。转换所有 ts 项目，将所有生成的 js/css/… 源 + 依赖项复制到托管服务器，你就可以开始了。
2. 使用特殊的捆绑工具进行部署，例如 webpack 或 systemjs builder。

它们带有#1 中缺少的所有可能性。

您可以将所有应用程序代码打包到您在 HTML 中引用的几个 js/css/… 文件中。 systemjs 构建器甚至允许您摆脱将 systemjs 作为部署包的一部分的需要。

1. 从 Angular 8 开始，您可以使用 ng deploy 从 CLI 部署您的应用程序。 ng deploy 需要与您选择的平台一起使用（例如 @angular/fire ）。您可以在 此处查看官方文档以了解最适合您的 方法

是的，您很可能需要部署 systemjs 和一堆其他外部库作为包的一部分。是的，您将能够将它们捆绑到您从 HTML 页面引用的几个 js 文件中。

您不必从页面中引用所有已编译的 js 文件 - systemjs 因为模块加载器会处理这些问题。

我知道这听起来很混乱 - 为了帮助您开始使用 #2，这里有两个非常好的示例应用程序：

SystemJS 构建器： angular2 种子

WebPack： angular2 webpack 启动器

原文由 Amid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用

ng build --configuration=production

然后您可以检查您的 angular.json 键 outputPath 它通常具有值 dist 但也可能不同。

 "build": {
          "options": {
            "outputPath": "dist"

使用 dist 作为值，构建的输出文件将放置在文件夹下 /dist

构建时，您的 Angular 项目将仅 包含 静态文件 Html、Javascript、Css 和图像或其他资产。因此，您需要的只是一个可以为客户端提供静态文件的 Web 服务器。就那么简单。可以是 nginx、tomcat 任何可以将这些静态文件提供给客户端的东西。这也在 角度文档 中说明

由于这些文件是静态的，因此您可以将它们托管在任何能够提供文件的 Web 服务器上

您在 outputPath 下构建的项目将已经包含一个 index.html 它将自动具有所有必要的导入，因此当 index.html 交付给客户端时，浏览器还将获取所有其他必要的文件。必要的信息已经包含在 index.html 中。

你问题的第二部分

我是否使用 gulp 缩小它们

官方方式

angular.json 将包含 每个环境的特定配置，其中之一将是 optimization

optimization 可以是布尔值（真，假）

 "configurations": {
            "production": {
              "optimization": true  --> will mean true for all properties of the next custom object

optimization 也可以是自定义对象

 "configurations": {
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": true
      },
      "fonts": true
    }

切换到 "scripts": false 将导致 .js 文件不会被缩小

也切换到样式 -> "minify": false 也将避免样式缩小。

无论您在 angular.json 中有什么配置 用于优化，如果您在构建期间提供参数，它都可以被覆盖。因此，通过执行 ng build --configuration=production --optimization=false 它将构建您的生产项目并应用于 optimization 对象值 false 的每个属性，这实际上将禁用所有内容的缩小。

原文由 Panagiotis Bougioukos 发布，翻译遵循 CC BY-SA 4.0 许可协议