您如何部署Angular应用程序？

进入生产阶段后，如何部署Angular应用程序？

到目前为止，我所见过的所有指南（甚至在angular.io上）都依靠可用于服务的Lite服务器和browserSync来反映更改-但是在完成开发后，如何发布应用程序？

我要.js在index.html页面上导入所有已编译的文件还是使用gulp缩小它们？他们会工作吗？生产版本中是否完全需要SystemJS？

您实际上是在将两个问题合而为一。

第一个是如何托管您的应用程序？。
正如@toskv提到的那样，它的问题确实太广泛了，无法回答，并且取决于许多不同的事物。

第二个是如何准备应用程序的部署版本？。
您在这里有几种选择：

1. 照原样部署。就是这样-没有缩小，串联，名称修饰等操作。编译所有ts项目，将所有生成的js / css / ...源+依赖项复制到托管服务器，您就可以开始了。

2. 使用特殊的捆绑工具（例如webpack或systemjs构建器）进行部署。
   它们具有＃1中缺少的所有可能性。
   您可以将所有应用程序代码打包到您在HTML中引用的js / css / ...文件中。systemjsbuilder甚至允许您摆脱将其包含systemjs在部署软件包中的需求。

3. 您可以ng deploy从Angular 8开始使用CLI来部署应用程序。ng deploy需要与您选择的平台结合使用（例如@angular/fire）。您可以在此处查看官方文档，以了解最适合您的方法

是的，您很可能需要部署systemjs和捆绑其他外部库作为软件包的一部分。是的，您将能够将它们捆绑成从HTML页面引用的几个js文件。

不过，您不必引用页面中所有已编译的js文件- systemjs因为模块加载程序会解决这一问题。

我知道这听起来很泥泞-为了帮助您开始使用＃2，这里有两个非常好的示例应用程序：

SystemJS构建器：angular2种子

WebPack：angular2 webpack入门

简单的答案。使用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的一个示例：

1. 创建一个Heroku帐户并安装CLI

2. 将angular-clidep移至dependenciesin package.json（以便在按下Heroku时安装它。

3. 添加一个postinstall将ng build代码推送到Heroku时将运行的脚本。还要为将在下一步中创建的节点服务器添加启动命令。这会将应用程序的静态文件dist放置在服务器上的目录中，然后启动应用程序。

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

4. 创建一个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);

5. 创建一个Heroku遥控器，然后推送以欺骗该应用程序。

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

这里有一个快速的书面记录我这样做，有更多详细信息，包括如何强制要求使用HTTPS，以及如何处理PathLocationStrategy:)

我永远使用：

1. 使用angular-cli到dist文件夹构建Angular应用程序ng build --prod --output-path ./dist

2. 在Angular应用程序路径中创建server.js文件：

   const 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);
   

3. 永远开始 forever start server.js

就这样！您的应用程序应该正在运行！

希望这可能会有所帮助，并希望我将在一周内尝试一下。

1. 在Azure上创建Web应用
2. 在vs代码中创建Angular 2应用。
3. Webpack到bundle.js。
4. 下载Azure网站发布的配置文件xml
5. 使用带有站点配置文件的https://www.npmjs.com/package/azure-deploy配置Azure部署 。
6. 部署。
7. 品尝奶油。

如果您在本地主机上像我一样测试应用程序，或者空白页会出现一些问题，我会使用以下方法：

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/"应用程序显示“主机”在哪里（简单来说）。有了它，您甚至可以在任何文件夹中包含多个angular应用程序。

为了将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上进行部署。跟随链接

要在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：现在在任何浏览器中浏览应用程序。

您也可以观看视频以更好地理解。

影片网址：https：//youtu.be/F8EI-8XUNZc

如果您在Apache（Linux服务器）中部署应用程序，则可以 按照以下步骤进行操作：

第一步： ng build --prod --env=prod

第二步。（将dist复制到服务器中），然后创建dist文件夹，复制dist文件夹并将其部署在服务器的根目录中。

第三步。.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>

通过使用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部署

在ghpages中测试Angular2 Webpack的部署

首先从dist您的应用程序文件夹中获取所有相关文件，对我而言，它是Assets文件夹中的+ css文件+ main.bundle.js + polyfills.bundle.js + vendor.bundle.js

然后将此文件推送到您创建的仓库中。

1-如果您希望应用程序在根目录上运行，请创建一个名称为[yourgithubusername] .github.io的特殊存储库，并将这些文件推送到 master分支中

2-好像要在子目录或除根目录以外的其他分支中创建这些页面时，创建分支gh-pages并将这些文件推送到该分支中。

在这两种情况下，我们访问这些已部署页面的方式都会有所不同。

对于第一种情况，它将是https：// [yourgithubusername] .github.io，对于第二种情况，它将是[yourgithubusername] .github.io / [Repo name]。

如果假设要使用第二种情况进行部署，请确保在dist中更改index.html文件的基本URL，因为所有路由映射都取决于您提供的路径，并且应将其设置为[/ branchname]。

链接到此页面

https://rahulrsingh09.github.io/部署

Git回购

https://github.com/rahulrsingh09/部署

为了方便快捷地托管角度应用程序，我一直在使用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的文件夹。

在天蓝色中部署Angular 2很容易

1. 运行ng build --prod，它将生成一个dist文件夹，其中的所有内容都捆绑在几个文件中，包括index.html。

2. 在其中创建一个资源组和一个Web应用程序。

3. 使用FTP放置dist文件夹文件。毫无疑问，它将寻找index.html来运行应用程序。

而已。您的应用正在运行！

截至2017年，最好的方法是对您的角度项目使用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进行托管，那将会非常快。

使用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从战争的根源加载资源。

当我开始向我的角度项目添加路由时，我进一步修改了maven构建，以将index.html从/ dist复制到WEB-INF / app。并且，添加了Java控制器，该控制器将所有服务器端rest调用重定向到index。

只需点击以下链接，

更改您的Index.html页面脚本文件路径更改您的component.html路径，以防遇到无法找到位置的错误

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy