一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
当前回答
为了将你的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'));
});
还要在包中添加express作为依赖项。json文件。
然后将其部署到您喜欢的环境中。
我已经整理了一个关于IIS部署的小博客。按照链接
其他回答
点击下面的链接,
修改Index.html页面的脚本文件路径 改变你的component.html路径,以防你的获取错误无法找到位置
https://angular.io/docs/ts/latest/guide/deployment.html !# dev-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'));
});
还要在包中添加express作为依赖项。json文件。
然后将其部署到您喜欢的环境中。
我已经整理了一个关于IIS部署的小博客。按照链接
你可以通过使用Ahead of Time编译器编译来获得最小和最快的加载产品包,并使用rollup来进行树摇/缩小,如angular AOT烹饪书中所示:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
在之前的回答中说过,这也可以用Angular-CLI来实现,但如果你还没有使用CLI来制作你的应用,你应该按照食谱来做。
我还有一个材料和SVG图表的工作示例(由Angular2支持),它包括一个用AOT烹饪书创建的包。您还可以找到创建bundle所需的所有配置和脚本。点击这里查看:https://github.com/fintechneo/angular2-templates/
我制作了一个快速视频,演示了AoT编译构建与开发环境的文件数量和大小之间的区别。它显示了上面github存储库中的项目。你可以在这里看到:https://youtu.be/ZoZDCgQwnmQ
使用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:)
我用永远:
使用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
这是所有!您的应用程序应该正在运行!