你如何部署Angular 2应用程序？

一旦他们到达生产阶段，你如何部署Angular 2应用程序？

到目前为止，我所见过的所有指南（即使是在angular.io上 ）都依赖于lite服务器和browserSync来反映更改 – 但是当您完成开发时，如何发布应用程序？

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

Answer 1

其实你在这里碰到两个问题。 首先是如何托pipe您的应用程序。 而@toskv提到了它真正太广泛的问题来回答，并取决于许多不同的事情。 第二个更具体 – 如何准备应用程序的部署版本。 你有几个select在这里：

1. 按原样部署。 只是 – 没有缩小，连接，名称mangling等transpile所有你的ts项目，复制所有你的结果js / css / …源+依赖关系的托pipe服务器，你很好去。
2. 使用特殊的捆绑工具进行部署。 像webpack或systemjs构build器。 他们来与＃1缺乏的所有可能性。 你可以将所有的应用程序代码打包到你在html中引用的js / css / …文件中。 Systemjs buider甚至可以让你摆脱需要包含systemjs作为你的部署包的一部分。

是的，你很可能需要部署systemjs和其他一些外部库作为你的包的一部分。 是的，你可以将它们捆绑到你的html页面引用的js文件中。 你不必从页面引用所有编译好的js文件，但是systemjs作为一个模块加载器来处理。

我知道这听起来很浑浊 – 帮助你开始使用＃2这里有两个非常好的示例应用程序：

SystemJS构build器： angular2种子

WebPack： angular2 webpack启动器

看看他们是如何做到的 – 希望这会帮助你find你捆绑应用程序的方式。

Answer 2

简单的答案。 使用Angular CLI并发出

 ng build 

命令在您的项目的根目录。 该站点将在dist目录中创build，您可以将其部署到任何Web服务器。

这将build立testing，如果你有你的应用程序中使用生产设置

 ng build --prod 

这将在dist目录中构build项目，并将其推送到服务器。

自从我第一次发布这个答案以来发生了很多事情。 CLI终于在1.0.0，所以按照这个指南去升级你的项目应该发生在你尝试构build之前。 https://github.com/angular/angular-cli/wiki/stories-rc-update

Answer 3

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

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

2. 将angular-cli dep移动到package.json的dependencies （以便在您推送到Heroku时进行安装。

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

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

4. 创build一个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. 创build一个Heroku的远程，并推动欺骗应用程序。

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

这里有一个我做了更详细的快速写作 ，包括如何强制请求使用HTTPS以及如何处理PathLocationStrategy 🙂

Answer 4

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

1. 在Azure上创buildWeb应用程序
2. 在vs代码中创buildAngular 2应用程序。
3. Webpack到bundle.js。
4. 下载Azure网站发布的个人资料xml
5. 使用站点configuration文件，使用https://www.npmjs.com/package/azure-deployconfigurationAzure部署。;
6. 部署。
7. 品尝奶油。

Answer 5

通过使用Ahead of time编译器进行编译，并通过汇总树形结构/缩小，如下面的angular度AOT菜谱中所示，您可以获得最小和最快的加载生产包： https : //angular.io/docs/ts/latest/cookbook /aot-compiler.html

如前面的答案中所述，Angular-CLI也可以使用这个function，但是如果您没有使用CLI创build应用程序，则应该按照菜谱进行操作。

我还有一个使用材料和SVG图表（由Angular2支持）的工作示例，它包含使用AOT食谱创build的一个包。 您还可以find创build该软件包所需的所有configuration和脚本。 看看这里： https ： //github.com/fintechneo/angular2-templates/

我做了一个快速的video，展示了AoT编译构build的文件数量和大小与开发环境的差异。 它显示了上面的github仓库的项目。 你可以在这里看到： https ： //youtu.be/ZoZDCgQwnmQ

Answer 6

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

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

所以，创build一个节点入口点文件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上进行部署。 按照链接

Answer 7

Github页面中的Angular 2部署

在ghpages中testingAngular2 Webpack的部署

首先从您的应用程序的Dist文件夹中获取所有相关文件

对我来说，这是资产文件夹中的CSS文件main.bundle.js polyfills.bundle.js vendor.bundle.js

然后把这个文件放在你创build的仓库中。

1 – 如果您希望应用程序在根目录上运行，请使用名称[yourgithubusername] .github.io创build一个特殊的回购库，并在主分支中指派这些文件

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

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

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

如果你想使用sefcond的情况下部署它，请确保更改dist中的index.html文件的基础URL，因为所有的路由映射取决于你给的path，它应该设置为[/ branchname]。

链接到这个页面

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Answer 8

在Azure中部署Angular 2非常简单

1. 运行build –prod ，它将生成一个dist文件夹，里面的所有东西都捆绑在一些文件中，包括index.html。

2. 在里面创build一个资源组和一个networking应用程序。

3. 使用FTP放置您的dist文件夹文件。 在azure中，它将查找index.html来运行应用程序。

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

Answer 9

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

简而言之，您将运行ng build --prod ，在软件包中创build一个dist文件夹，这就是部署到Firebase Hosting的文件夹。

Answer 10

截至2017年，最好的方法是使用angular-cli （v1.4.4）来进行angular度项目。

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

您不需要明确地添加-aot，默认情况下使用–prod.And使用–output-hashing是根据您的个人喜好caching突发。

您可以通过添加以下内容明确添加CDN支持：

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

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

Answer 11

只要按照下面的链接，

更改您的Index.html页面脚本文件path更改您的component.htmlpathincase您的错误找不到位置

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