你如何部署 Angular 应用程序？

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

---

您实际上在这里将两个问题合二为一。

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

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

按原样部署。就是这样 - 没有缩小、连接、名称修改等。转换所有 ts 项目，将所有生成的 js/css/... 源 + 依赖项复制到托管服务器，你就可以开始了。使用特殊的捆绑工具进行部署，例如 webpack 或 systemjs builder。它们带有#1 中缺少的所有可能性。您可以将所有应用程序代码打包到您在 HTML 中引用的几个 js/css/... 文件中。 systemjs builder 甚至允许您摆脱将 systemjs 作为部署包的一部分包含在内的需要。从 Angular 8 开始，您可以使用 ng deploy 从 CLI 部署您的应用程序。 ng deploy 需要与您选择的平台（例如@angular/fire）结合使用。您可以在此处查看官方文档以了解最适合您的方法

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

不过，您不必从页面中引用所有已编译的 js 文件 - systemjs 作为模块加载器将负责这一点。

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

SystemJS 构建器：angular2 seed

网络包：angular2 webpack starter

---

使用 Angular CLI 很容易。 Heroku 的一个例子：

创建一个 Heroku 帐户并安装 CLI 将 angular-cli dep 移动到 package.json 中的依赖项（以便在您推送到 Heroku 时安装它。添加一个安装后脚本，该脚本将在代码推送到 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

这是我所做的快速writeup，其中包含更多详细信息，包括如何强制请求使用 HTTPS 以及如何处理 PathLocationStrategy :)

---

我与 forever 一起使用：

使用 angular-cli 构建您的 Angular 应用程序到 dist 文件夹 ng build --prod --output-path ./dist 在您的 Angular 应用程序路径中创建 server.js 文件： const express = require('express');常量路径 = 要求（'路径'）;常量应用程序 = 快递（）； app.use(express.static(__dirname + '/dist')); app.get('/*', function(req,res) { res.sendFile(path.join(__dirname + '/dist/index.html')); }); app.listen(80);永远启动 永远启动 server.js

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

---

如果您在 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/" 以显示应用程序在哪里是“主框架”[简单来说]。有了它，您甚至可以在任何文件夹中拥有多个 Angular 应用程序。

---

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

在 Azure 创建 Web 应用 在 vs 代码中创建 Angular 2 应用。 Webpack 到 bundle.js。下载 Azure 站点发布的配置文件 xml 使用 https://www.npmjs.com/package/azure-deploy 和站点配置文件配置 Azure-deploy。部署。尝尝奶油。

---

为了将您的 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

---

要在 IIS 中部署应用程序，请按照以下步骤操作。

第 1 步：使用命令 ng build --prod 构建您的 Angular 应用程序

第 2 步：构建后，所有文件都存储在应用程序路径的 dist 文件夹中。

第 3 步：在 C:\inetpub\wwwroot 中创建一个名为 QRCode 的文件夹。

第 4 步：将 dist 文件夹的内容复制到 C:\inetpub\wwwroot\QRCode 文件夹。

第 5 步：使用命令（Window + R）打开 IIS 管理器并键入 inetmgr 单击确定。

第 6 步：右键单击默认网站，然后单击添加应用程序。

步骤 7：输入别名 'QRCode' 并将物理路径设置为 C:\inetpub\wwwroot\QRCode。

第 8 步：打开 index.html 文件并找到行 href="\" 并删除 '\'。

第 9 步：现在在任何浏览器中浏览应用程序。

您也可以关注视频以获得更好的理解。

视频网址：https://youtu.be/F8EI-8XUNZc

---

如果您在 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>

---

通过使用 Ahead of Time 编译器进行编译，您可以获得最小和最快的加载生产包，并使用汇总进行 tree-shake/minify，如 Angular 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 文件夹中获取所有相关文件，对我而言，它是资产文件夹中的 : + css 文件 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

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

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

- 如果您想在子目录或根以外的其他分支中创建这些页面，请创建一个分支 gh-pages 并将这些文件推送到该分支中。

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

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

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

链接到此页面

https://rahulrsingh09.github.io/Deployment

Git 回购

https://github.com/rahulrsingh09/Deployment

---

对于托管 Angular 应用程序的快速且廉价的方式，我一直在使用 Firbase 托管。它在第一层是免费的，并且非常容易使用 Firebase CLI 部署新版本。本文介绍了将生产 Angular 2 应用部署到 Firebase 的必要步骤：https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

简而言之，您运行 ng build --prod，它会在包中创建一个 dist 文件夹，该文件夹将部署到 Firebase 托管。

---

在 Azure 中部署 Angular 2 很容易

运行 ng build --prod ，它将生成一个 dist 文件夹，其中包含捆绑在几个文件中的所有内容，包括 index.html。在其中创建一个资源组和一个 Web 应用程序。使用 FTP 放置您的 dist 文件夹文件。在 azure 中，它将查找 index.html 来运行应用程序。

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

---

截至 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 进行托管，速度相当快。

---

通过 Angular CLI，您可以使用以下命令：

ng build --prod

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

如果您没有使用 Web 服务器的经验，我建议您使用 Angular to Cloud。您只需要将 dist 文件夹压缩为 zip 文件并上传到平台。

---

我想说很多在 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 从战争的根目录加载资源。

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

---

您可以使用

ng build --configuration=production

然后您可以在 angular.json 中检查键 outputPath，它通常具有值 dist，但也可能不同。

"build": {
          "options": {
            "outputPath": "dist"

使用 dist 作为值，构建的输出文件将放置在文件夹 /dist 下

构建时，您的 Angular 项目将由 仅来自静态文件 Html、Javascript、Css 和图像或其他资产。因此，您需要的只是一个可以为客户端提供静态文件的 Web 服务器。就那么简单。可以是 nginx、tomcat 任何可以将这些静态文件提供给客户端的东西。这也在 angular doc

由于这些文件是静态的，因此您可以将它们托管在任何能够提供文件的 Web 服务器上

您在 outputPath 下构建的项目已经包含一个 index.html，它会自动包含所有必要的导入，因此当 index.html 交付给客户端时，浏览器还将获取所有其他必要的文件。 index.html 中已包含必要的信息。

你问题的第二部分

我是否使用 gulp 缩小它们

官方方式

angular.json 将包含每个环境的特定配置，其中之一是 optimization

optimization 可以是布尔值（真、假）

"configurations": {
            "production": {
              "optimization": true  --> will mean true for all properties of the next custom object

optimization 也可以是自定义对象

 "configurations": {
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": true
      },
      "fonts": true
    }

切换到 "scripts": false 将导致 .js 文件不会被缩小

也切换到样式-> "minify": false 还将避免样式缩小。

无论您在 angular.json 中有什么配置进行优化，如果您在构建期间提供参数，它都可以被覆盖。因此，通过执行 ng build --configuration=production --optimization=false，它将构建您的生产项目并将值 false 应用于 optimization 对象的每个属性，这实际上将禁用所有内容的缩小。

---

只需点击以下链接，

更改您的 Index.html 页面脚本文件路径更改您的 component.html 路径以防出现找不到位置的错误

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

---