一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
当前回答
点击下面的链接,
修改Index.html页面的脚本文件路径 改变你的component.html路径,以防你的获取错误无法找到位置
https://angular.io/docs/ts/latest/guide/deployment.html !# dev-deploy
其他回答
截至2017年,最好的方法是在你的angular项目中使用angular-cli (v1.4.4)。
ng build --prod --env=prod --aot --build-optimizer --output-hashing none
你不需要显式地添加——aot,因为它在默认情况下是打开的——prod。-output-hashing的使用取决于你对缓存爆破的个人偏好。
您可以通过添加以下内容显式添加CDN支持:
--deploy-url "https://<your-cdn-key>.cloudfront.net/"
如果你计划使用CDN进行托管,这是相当快的。
你其实是在同时回答两个问题。
第一个问题是如何托管应用程序。 正如@toskv提到的,这个问题太宽泛了,无法回答,取决于许多不同的事情。
第二个问题是如何准备应用程序的部署版本? 这里有几个选项:
Deploy as it is. Just that - no minification, concatenation, name mangling, etc. Transpile all your ts project copy all your resulting js/css/... sources + dependencies to the hosting server and you are good to go. Deploy using special bundling tools, like webpack or systemjs builder. They come with all the possibilities that are lacking in #1. You can pack all your app code into just a couple of js/css/... files that you reference in your HTML. systemjs builder even allows you to get rid of the need to include systemjs as part of your deployment package. You can use ng deploy as of Angular 8 to deploy your app from your CLI. ng deploy will need to be used in conjunction with your platform of choice (such as @angular/fire). You can check the official docs to see what works best for you here
是的,你很可能需要将systemjs和其他一些外部库部署到你的包中。是的,你可以将它们捆绑到你从HTML页面引用的几个js文件中。
你不需要从页面中引用所有已编译的js文件——systemjs作为模块加载器会处理这些。
我知道这听起来很模糊——为了帮助你开始第2点,这里有两个非常好的示例应用程序:
SystemJS构建器:angular2种子
安检检测器
对于那些看到“加载模块脚本失败:…”的错误。简单的去你的棱角分明。将“OutputPath”改为“dist”。然后运行ng build——configuration production来构建你的应用。
原因是angular认为你的应用程序在根目录下,但如果你不做这个更改,它就在根目录/YourAppName下
希望这能有所帮助,希望我能在这周尝试一下。
在Azure上创建Web应用程序 在vs code中创建Angular 2应用。 Webpack到bundle.js。 下载Azure站点发布的概要文件xml 配置Azure-deploy using https://www.npmjs.com/package/azure-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部署的小博客。按照链接