你可以通过使用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，这很简单。以Heroku为例:

创建Heroku帐号并安装CLI 移动angular-cli dep到package中的依赖项。json(这样当你推送到Heroku时它就会被安装。 添加一个postinstall脚本，当代码被推送到Heroku时将运行ng build。还要为将在下面的步骤中创建的Node服务器添加启动命令。这将把应用程序的静态文件放在服务器上的dist目录中，然后启动应用程序。

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

创建一个Express服务器来服务应用程序。

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

创建一个Heroku远程和推动部署应用程序。

heroku create
git add .
git commit -m "first deploy"
git push heroku master

下面是我做的一个快速的书写，有更多的细节，包括如何强制请求使用HTTPS，以及如何处理PathLocationStrategy:)

Angular 2在Github Pages中的部署

测试Angular2 Webpack在ghpages中的部署

首先从dist文件夹中获取所有相关文件，对我来说是: + CSS文件在资产文件夹 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

然后将这些文件推入您创建的repo中。

1 -如果你想让应用程序在根目录上运行-创建一个特殊的repo，名称为[yourgithubusername].github。IO并将这些文件推到主分支中

2——如果你想在子目录或根目录以外的不同分支中创建这些页面，创建一个分支gh-pages并将这些文件推到该分支中。

在这两种情况下，我们访问这些部署页面的方式将是不同的。

对于第一种情况，它将是https://[yourgithubusername].github.io，对于第二种情况，它将是[yourgithubusername].github。io /(回购的名字)。

如果你想使用第二种情况部署它，请确保在dist中更改index.html文件的基本url，因为所有的路由映射都依赖于你给出的路径，它应该设置为[/branchname]。

链接到本页

https://rahulrsingh09.github.io/Deployment

去回购

https://github.com/rahulrsingh09/Deployment

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

第一个问题是如何托管应用程序。 正如@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种子

安检检测器

简单的答案。使用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

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