一旦Angular应用进入生产阶段,你该如何部署它们呢?

到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?

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


当前回答

我用永远:

使用Angular -cli到dist文件夹ng Build——prod——output-path ./dist来构建你的Angular应用 在你的Angular应用程序路径下创建server.js文件: Const express = require('express'); Const path = require('path'); Const app = express(); app.use(表达。Static (__dirname + '/dist')); App.get ('/*', function(req,res) { res.sendFile(路径。Join (__dirname + '/dist/index.html')); }); app.listen (80); 永远启动server.js

这是所有!您的应用程序应该正在运行!

其他回答

使用Angular CLI,这很简单。以Heroku为例:

创建Heroku帐号并安装CLI 移动angular-cli dep到package中的依赖项。json(这样当你推送到Heroku时它就会被安装。 添加一个postinstall脚本,当代码被推送到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

下面是我做的一个快速的书写,有更多的细节,包括如何强制请求使用HTTPS,以及如何处理PathLocationStrategy:)

要在IIS中部署应用程序,请遵循以下步骤。

第一步:使用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。

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

步骤9:现在在任何浏览器中浏览应用程序。

你也可以跟着视频更好地理解。

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

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

如果你在Apache (Linux服务器)上部署你的应用程序,那么你可以遵循以下步骤: 请遵循以下步骤:

步骤1: Ng build——prod——env=prod

步骤2。(复制区域到服务器) 然后创建dist文件夹,复制dist文件夹并部署到服务器根目录。

步骤3。在根文件夹中创建。htaccess文件,并将其粘贴到。htaccess . conf文件中

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

点击下面的链接,

修改Index.html页面的脚本文件路径 改变你的component.html路径,以防你的获取错误无法找到位置

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