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

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

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

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

其实你在这里碰到两个问题。 首先是如何托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你捆绑应用程序的方式。

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

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

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

  2. angular-cli dep移动到package.jsondependencies (以便在您推送到Heroku时进行安装。

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

 "scripts": { // ... "start": "node server.js", "postinstall": "ng build --aot -prod" } 
  1. 创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); 
  1. 创build一个Heroku的远程,并推动欺骗应用程序。
 heroku create git add . git commit -m "first deploy" git push heroku master 

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

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

  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. 品尝奶油。

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

为了将您的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上进行部署。 按照链接

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

在Azure中部署Angular 2非常简单

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

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

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

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

对于一个快速和廉价的方式来主持一个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的文件夹。

截至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,速度相当快。

只要按照下面的链接,

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

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