一旦Angular应用程序进入生产阶段，您如何部署它们？
到目前为止我所看到的所有指南（甚至在angular.io上）都指望服务器和browserSync的lite服务器反映变化 - 但是当你完成开发时，你如何发布应用程序？
我是否在.js页面上导入所有已编译的index.html文件，还是使用gulp缩小它们？他们会工作吗？在生产版本中我是否完全需要SystemJS？
你实际上在这里触及两个问题。第一个是如何托管您的应用程序。正如@toskv提到的那样，它的答案确实过于宽泛，取决于许多不同的事情。第二个更具体 - 您如何准备应用程序的部署版本。你有几个选择：
是的，您很可能需要将systemjs和一堆其他外部库作为软件包的一部分进行部署。是的，您将能够将它们捆绑到您从html页面引用的几个js文件中。您不必从页面引用所有已编译的js文件 - 作为模块加载器的systemjs将负责这一点。
我知道这听起来很混乱 - 帮助你开始使用＃2这里有两个非常好的示例应用程序：
SystemJS构建器：angular2 seed
WebPack：angular2 webpack starter
看看他们是如何做到的 - 希望这有助于您找到捆绑应用程序的方式。
您可以通过使用Ahead of Time编译器进行编译获得最小和最快的加载生产包，并使用汇总进行树摇/缩小，如此处的角度AOT食谱中所示：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
如前面的答案所述，Angular-CLI也可以使用它，但是如果你没有使用CLI创建你的应用程序，你应该遵循这本食谱。
我还有一个包含材料和SVG图表（由Angular2支持）的工作示例，它包含使用AOT手册创建的包。您还可以找到创建捆绑包所需的所有配置和脚本。在这里查看：https://github.com/fintechneo/angular2-templates/
我制作了一个快速视频，演示了AoT编译版本与开发环境之间的文件数量和大小之间的差异。它显示了上面的github存储库中的项目。你可以在这里看到：https://youtu.be/ZoZDCgQwnmQ
Github页面中的Angular 2部署
测试Angular2 Webpack在ghpages中的部署
首先从应用程序的dist文件夹中获取所有相关文件，对我来说，资产文件夹中的+ css文件+ main.bundle.js + polyfills.bundle.js + vendor.bundle.js
然后在您创建的仓库中推送此文件。
1 - 如果您希望应用程序在根目录上运行 - 创建一个名为[yourgithubusername] .github.io的特殊仓库并在主分支中推送这些文件
2 - 如果您想在子目录或除根之外的其他分支中创建这些页面，请创建分支gh-pages并在该分支中推送这些文件。
在这两种情况下，我们访问这些部署页面的方式都不同。
对于第一种情况，它将是https：// [yourgithubusername] .github.io，对于第二种情况，它将是[yourgithubusername] .github.io / [Repo name]。
如果您想使用第二种情况部署它，请确保更改dist中index.html文件的基本URL，因为所有路由映射都取决于您提供的路径，并且应设置为[/ branchname]。
链接到此页面
https://rahulrsingh09.github.io/Deployment
去回购
为了快速而廉价地托管角度应用程序，我一直在使用Firbase托管。它在第一层是免费的，并且使用Firebase CLI非常容易部署新版本。这篇文章解释了将生产角度2应用程序部署到Firebase的必要步骤：https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d
简而言之，您运行ng build --prod，它在包中创建一个dist文件夹，这是部署到Firebase Hosting的文件夹。
在天蓝色中部署Angular 2很容易
而已。你的应用正在运行！
截至2017年，最好的方法是使用angular-cli（v1.4.4）进行角度项目。
ng build --prod --env=prod --aot --build-optimizer --output-hashing none
您无需在默认情况下使用--prod显式启用明文 - 并且使用--output-hashing根据您的个人偏好设置缓存突发。
您可以通过添加以下内容显式添加CDN支持：
--deploy-url "https://<your-cdn-key>.cloudfront.net/"
如果您计划使用CDN进行托管，速度相当快。
使用Angular CLI，您可以使用以下命令：
ng build --prod
它生成一个dist文件夹，其中包含部署应用程序所需的全部内容。
如果您没有使用Web服务器，我建议您使用Angular to Cloud。您只需将dist文件夹压缩为zip文件并将其上传到平台即可。
我会说很多有角度之前具有Web经验的人用于在战争中部署他们的web工件（即Java / Spring项目中的jquery和html）。在尝试将我的角度和REST项目分开之后，我最终做到了解决CORS问题。
我的解决方案是将所有使用CLI生成的angular（4）内容从my-app移动到MyJavaApplication / angular。然后我修改了我的Maven构建以使用maven-resources-plugin将内容从/ angular / dist移动到我的发行版的根目录（即$ project.build.directory} / MyJavaApplication）。 Angular默认情况下从war的根加载资源。
当我开始向我的角度项目添加路由时，我进一步修改了maven构建以将index.html从/ dist复制到WEB-INF / app。并且，添加了一个Java控制器，将所有服务器端休息调用重定向到索引。
只需按照以下链接，
更改您的Index.html页面脚本文件路径更改您的component.html路径，以防止您找不到该位置的获取错误
https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy
简单回答。使用Angular CLI并发出
ng build
命令在项目的根目录中。该站点将在dist目录中创建，您可以将其部署到任何Web服务器。
这将构建为测试，如果您在应用程序中有生产设置，您应该使用
ng build --prod
这将在dist目录中构建项目，这可以推送到服务器。
自从我第一次发布这个答案以来发生了很多事情。 CLI最终处于1.0.0，因此按照本指南进行升级，您的项目应该在您尝试构建之前进行。 https://github.com/angular/angular-cli/wiki/stories-rc-update
使用Angular CLI很容易。 Heroku的一个例子：
angular-cli dep移动到dependencies中的package.json（以便在您推送到Heroku时安装它。postinstall脚本，当代码被推送到Heroku时将运行ng build。还要为将在以下步骤中创建的节点服务器添加启动命令。这会将应用程序的静态文件放在服务器上的dist目录中，然后启动应用程序。"scripts": {
// ...
"start": "node server.js",
"postinstall": "ng build --aot -prod"
}
// 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 create
git add .
git commit -m "first deploy"
git push heroku master
这是一个快速的writeup我做了更详细，包括如何强制使用HTTPS的请求以及如何处理PathLocationStrategy :)
希望这可能会有所帮助，希望我能在本周试一试。
为了将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'));
});
另外在package.json文件中添加express作为依赖项。
然后将其部署在您首选的环境中。
我已经整理了一个小博客，以便在IIS上进行部署。关注link
我用forever：
ng build --prod --output-path ./distconst express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname + '/dist/index.html'));
});
app.listen(80);
forever start server.js就这样！你的应用程序应该运行！
要在IIS中部署应用程序，请按照以下步骤操作。
第1步：使用命令ng build --prod构建Angular应用程序
第2步：构建完成后，所有文件都存储在应用程序路径的dist文件夹中。
步骤3：在名称QRCode的C：\ inetpub \ wwwroot中创建一个文件夹。
步骤4：将dist文件夹的内容复制到C：\ inetpub \ wwwroot \ QRCode文件夹。
步骤5：使用命令（Window + R）打开IIS管理器并键入inetmgr，单击“确定”。
步骤6：右键单击Default Web Site，然后单击Add Application。
步骤7：输入别名“QRCode”并将物理路径设置为C：\ inetpub \ wwwroot \ QRCode。
步骤8：打开index.html文件并找到行href =“\”并删除'\'。
第9步：现在在任何浏览器中浏览应用程序。
您还可以关注视频以便更好地理解。
如果在Apache（Linux服务器）中部署应用程序，则可以按照以下步骤操作：请执行以下步骤：
第1步：ng build --prod --env=prod
步骤2.（将dist复制到服务器中）然后创建dist文件夹，复制dist文件夹并将其部署在服务器的根目录中。
步骤3.在根文件夹中创建.htaccess文件并将其粘贴到.htaccess中
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
如果您在localhost上测试像我这样的应用程序，或者您将在空白页面上遇到一些问题，请使用此方法：
ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"
说明：
ng build
构建应用程序，但有很多空格，标签和其他东西。对于服务器而言，代码的外观并不重要。这就是我使用的原因：
ng build --prod --build-optimizer
这使代码生产和减小尺寸[--build-optimizer]允许减少更多的代码]。
所以最后我添加--base-href="http://127.0.0.1/my-app/"来显示应用程序在哪里是'主框架'[用简单的话说]。有了它你甚至可以在任何文件夹中拥有多个角度应用程序。