为了快速廉价地托管angular应用，我一直在使用Firbase托管。它在第一层是免费的，使用Firebase CLI部署新版本非常容易。本文解释了将你的angular 2产品应用部署到Firebase的必要步骤:https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

简而言之，你运行ng build——prod，它会在包中创建一个dist文件夹，这个文件夹会被部署到Firebase Hosting上。

你其实是在同时回答两个问题。

第一个问题是如何托管应用程序。 正如@toskv提到的，这个问题太宽泛了，无法回答，取决于许多不同的事情。

第二个问题是如何准备应用程序的部署版本? 这里有几个选项:

Deploy as it is. Just that - no minification, concatenation, name mangling, etc. Transpile all your ts project copy all your resulting js/css/... sources + dependencies to the hosting server and you are good to go. Deploy using special bundling tools, like webpack or systemjs builder. They come with all the possibilities that are lacking in #1. You can pack all your app code into just a couple of js/css/... files that you reference in your HTML. systemjs builder even allows you to get rid of the need to include systemjs as part of your deployment package. You can use ng deploy as of Angular 8 to deploy your app from your CLI. ng deploy will need to be used in conjunction with your platform of choice (such as @angular/fire). You can check the official docs to see what works best for you here

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

你不需要从页面中引用所有已编译的js文件——systemjs作为模块加载器会处理这些。

我知道这听起来很模糊——为了帮助你开始第2点，这里有两个非常好的示例应用程序:

SystemJS构建器:angular2种子

安检检测器

在azure中部署Angular 2很简单

运行ng build——prod，它将生成一个dist文件夹，其中所有内容都捆绑在几个文件中，包括index.html。 创建一个资源组和其中的web应用程序。 使用FTP放置dist文件夹文件。在azure中，它将寻找index.html来运行应用程序。

就是这样。你的应用程序正在运行!

在Angular CLI中，你可以使用以下命令:

ng build --prod

它生成一个dist文件夹，其中包含部署应用程序所需的所有内容。

如果你没有使用web服务器的经验，我建议你使用Angular to Cloud。你只需要把dist文件夹压缩成zip文件，然后上传到平台上。

要在IIS中部署应用程序，请遵循以下步骤。

第一步:使用ng Build——prod命令构建Angular应用

步骤2:构建后，所有文件都存储在应用程序路径的dist文件夹中。

步骤3:在C:\inetpub\wwwroot中创建一个名为QRCode的文件夹。

第四步:复制dist文件夹的内容到C:\inetpub\wwwroot\QRCode文件夹。

步骤5:使用命令(Window + R)打开IIS管理器，输入inetmgr，单击“确定”。

步骤6:右键单击默认网站，然后单击添加应用程序。

第七步:输入别名“QRCode”，设置物理路径为C:\inetpub\wwwroot\QRCode。

第八步:打开index.html文件，找到行href="\"并删除'\'。

步骤9:现在在任何浏览器中浏览应用程序。

你也可以跟着视频更好地理解。

视频网址:https://youtu.be/F8EI-8XUNZc

您可以构建用于生产的应用程序

ng build --configuration=production

然后你可以检查你的角度。它的值通常是dist，但也可以是不同的。

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

使用dist作为值，生成的输出文件将放在/dist文件夹下

在构建angular项目时，你的项目将只由静态文件Html、Javascript、Css和图像或其他资产组成。正因为如此，你所需要的只是一个可以向客户端提供静态文件的web服务器。就这么简单。可以是nginx, tomcat，任何可以将这些静态文件提供给客户端的东西。这在angular的文档中也有说明

因为这些文件是静态的，你可以把它们托管在任何web服务器上 具备文件服务能力

你在outputPath下构建的项目已经包含了一个index.html，它将自动导入所有必要的文件，所以当index.html被传递给客户端时，浏览器也将获取所有其他必要的文件。必要的信息已经包含在index.html中。

你的第二个问题

我用gulp缩小它们吗

官方的方式

角。Json将包含每个环境的特定配置，其中之一将是优化

优化可以是布尔值(true, false)

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

优化也可以是一个自定义对象

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

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

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

不管角的构型是什么。Json进行优化，它可以被覆盖，如果你在构建过程中提供一个参数。因此，通过执行ng build——configuration=production——optimization=false，它将构建用于生产的项目，并将值false应用到优化对象的每个属性，这实际上将禁用所有的最小化。