希望这能有所帮助，希望我能在这周尝试一下。

在Azure上创建Web应用程序 在vs code中创建Angular 2应用。 Webpack到bundle.js。 下载Azure站点发布的概要文件xml 配置Azure-deploy using https://www.npmjs.com/package/azure-deploy与网站简介。 部署。 尝尝奶油。

你可以通过使用Ahead of Time编译器编译来获得最小和最快的加载产品包，并使用rollup来进行树摇/缩小，如angular AOT烹饪书中所示:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

在之前的回答中说过，这也可以用Angular-CLI来实现，但如果你还没有使用CLI来制作你的应用，你应该按照食谱来做。

我还有一个材料和SVG图表的工作示例(由Angular2支持)，它包括一个用AOT烹饪书创建的包。您还可以找到创建bundle所需的所有配置和脚本。点击这里查看:https://github.com/fintechneo/angular2-templates/

我制作了一个快速视频，演示了AoT编译构建与开发环境的文件数量和大小之间的区别。它显示了上面github存储库中的项目。你可以在这里看到:https://youtu.be/ZoZDCgQwnmQ

截至2017年，最好的方法是在你的angular项目中使用angular-cli (v1.4.4)。

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

你不需要显式地添加——aot，因为它在默认情况下是打开的——prod。-output-hashing的使用取决于你对缓存爆破的个人偏好。

您可以通过添加以下内容显式添加CDN支持:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

如果你计划使用CDN进行托管，这是相当快的。

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

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应用到优化对象的每个属性，这实际上将禁用所有的最小化。

我用永远:

使用Angular -cli到dist文件夹ng Build——prod——output-path ./dist来构建你的Angular应用 在你的Angular应用程序路径下创建server.js文件: Const express = require('express'); Const path = require('path'); Const app = express(); app.use(表达。Static (__dirname + '/dist')); App.get ('/*'， function(req,res) { res.sendFile(路径。Join (__dirname + '/dist/index.html')); })； app.listen (80); 永远启动server.js

这是所有!您的应用程序应该正在运行!

我想说的是，很多在使用angular之前就有Web经验的人，都习惯于在战争中部署他们的Web构件(例如，在Java/Spring项目中部署jquery和html)。在试图将我的angular项目和REST项目分开后，我最终这样做是为了解决CORS问题。

我的解决方案是将所有用CLI生成的angular(4)内容从My -app移到MyJavaApplication/angular。然后我修改了我的Maven构建，使用Maven -resources-plugin将内容从/angular/dist移动到我的发行版的根目录(即$project.build.directory}/MyJavaApplication)。Angular默认从war的根目录加载资源。

当我开始在我的angular项目中添加路由时，我进一步修改了maven build，将index.html从/dist复制到WEB-INF/app。并且，添加了一个Java控制器，将所有服务器端rest调用重定向到索引。