您如何部署 Angular 个应用程序？

Question

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

到目前为止我看到的所有指南（甚至在 angular.io 上）都依靠精简服务器来提供服务和 browserSync 来反映变化——但是当你完成开发时，你怎么能发布应用程序？

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

Answer 1

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

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

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

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

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

虽然您不必从页面引用所有已编译的 js 文件 - systemjs 因为模块加载器会处理这些。

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

SystemJS 构建器：angular2 seed

网络包：angular2 webpack starter

Answer 2

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

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

Answer 3

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

Answer 4

使用 Angular CLI 很容易。 Heroku 的示例：

创建 Heroku 帐户并安装 CLI
将angular-cli dep移动到package.json中的dependencies（这样当你推送到Heroku时它就会安装。
添加一个 postinstall 脚本，当代码被推送到 Heroku 时，该脚本将运行 ng build。还要为将在以下步骤中创建的节点服务器添加启动命令。这会将应用程序的静态文件放在服务器上的 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 :)

Answer 5

通过提前编译器编译，您可以获得最小和最快的加载生产包，并且 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

Answer 6

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

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

所以，创建一个节点入口点文件服务器。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

Answer 7

按照下面的link,

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

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

Answer 8

Angular 2 部署在 Github 页面

测试 Angular2 Webpack 在 ghpages 中的部署

首先从应用程序的 dist 文件夹中获取所有相关文件，对我来说是： + css 资产文件夹中的文件 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

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

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

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

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

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

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

Link到这个页面

https://rahulrsingh09.github.io/Deployment

Git 回购

https://github.com/rahulrsingh09/Deployment

Answer 9

为了快速廉价地托管 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 托管的文件夹。

Answer 10

在 Azure 中部署 Angular 2 很容易

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

就是这样。您的应用运行ning !

Answer 11

截至 2017 年，最好的方法是为您的 angular 项目使用 angular-cli (v1.4.4)。

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

您无需显式添加 --aot，因为它默认打开 --prod.And 使用 --output-hashing 取决于您对缓存突发的个人偏好。

您可以通过添加 :

来显式添加 CDN 支持

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

如果您打算使用速度相当快的 CDN 进行托管。

Answer 12

有了Angular CLI，可以使用如下命令：

ng build --prod

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

如果您没有使用过 Web 服务器，我建议您使用 Angular to Cloud。您只需要将dist文件夹压缩成zip文件上传到平台即可。

Answer 13

我想说很多在 angular 之前拥有 Web 经验的人习惯于在 war（即 jquery 和 html 中部署他们的 Web 工件在 Java/Spring 项目中）。在尝试将我的 angular 和 REST 项目分开后，我最终这样做是为了解决 CORS 问题。

我的解决方案是将使用 CLI 生成的所有 angular (4) 内容从 my-app 移动到 MyJavaApplication/angular。然后我修改了我的 Maven 构建以使用 maven-resources-plugin 将内容从 /angular/dist 移动到我的发行版的根目录（即 $project.build.directory}/MyJavaApplication）。 Angular 默认从 war 的根加载资源。

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

Answer 14

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

第 1 步：使用命令 ng build --prod

构建您的 Angular 应用程序

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

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

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

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

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

第七步：输入别名'QRCode'，设置物理路径为C:\inetpub\wwwroot\QRCode.

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

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

大家也可以关注视频了解一下。

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

Answer 15

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

Answer 16

我使用 forever:

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

在您的 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);

永远开始forever start server.js

就是这样！你的申请应该是运行!

Answer 17

如果你像我一样在 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/" 以显示应用程序 'main frame' [简单来说]。有了它，您甚至可以在任何文件夹中拥有多个 angular 个应用程序。

Answer 18

您可以使用

构建您的生产应用程序

ng build --configuration=production

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

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

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

下

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

中也说明了这一点

Because these files are static, you can host them on any web server capable of serving files

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

中已包含必要的信息

你的问题的第二部分

do I minify them using 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 对象的每个属性，这实际上将禁用所有内容的缩小。

您如何部署 Angular 个应用程序？

How do you deploy Angular apps?

production

typescript

systemjs

angular