简单的答案。使用Angular CLI并发出

ng build 

命令在项目的根目录下。站点将在dist目录中创建，您可以将其部署到任何web服务器。

这将用于测试，如果你在你的应用程序中有生产设置，你应该使用

ng build --configuration production

这将在dist目录中构建项目，并且可以将其推送到服务器。

自从我第一次发布这个答案以来，发生了很多事情。CLI终于在1.0.0，所以按照这个指南去升级你的项目应该在你尝试构建之前发生。https://github.com/angular/angular-cli/wiki/stories-rc-update

为了将你的Angular2应用部署到生产服务器上，首先要确保你的应用在你的机器上本地运行。

Angular2应用也可以部署为节点应用。

因此，创建一个节点入口点文件server.js/app.js(我的例子使用express)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

还要在包中添加express作为依赖项。json文件。

然后将其部署到您喜欢的环境中。

我已经整理了一个关于IIS部署的小博客。按照链接

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

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

你可以通过使用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

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

ng build --prod

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

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

对于那些看到“加载模块脚本失败:…”的错误。简单的去你的棱角分明。将“OutputPath”改为“dist”。然后运行ng build——configuration production来构建你的应用。

原因是angular认为你的应用程序在根目录下，但如果你不做这个更改，它就在根目录/YourAppName下