一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
当前回答
使用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:)
其他回答
希望这能有所帮助,希望我能在这周尝试一下。
在Azure上创建Web应用程序 在vs code中创建Angular 2应用。 Webpack到bundle.js。 下载Azure站点发布的概要文件xml 配置Azure-deploy using https://www.npmjs.com/package/azure-deploy与网站简介。 部署。 尝尝奶油。
点击下面的链接,
修改Index.html页面的脚本文件路径 改变你的component.html路径,以防你的获取错误无法找到位置
https://angular.io/docs/ts/latest/guide/deployment.html !# dev-deploy
使用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应用,我一直在使用Firbase托管。它在第一层是免费的,使用Firebase CLI部署新版本非常容易。本文解释了将你的angular 2产品应用部署到Firebase的必要步骤:https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d
简而言之,你运行ng build——prod,它会在包中创建一个dist文件夹,这个文件夹会被部署到Firebase Hosting上。
我想说的是,很多在使用angular之前就有Web经验的人,都习惯于在战争中部署他们的Web构件(例如,在Java/Spring项目中部署jquery和html)。在试图将我的angular项目和REST项目分开后,我最终这样做是为了解决CORS问题。
我的解决方案是将所有用CLI生成的angular(4)内容从My -app移到MyJavaApplication/angular。然后我修改了我的Maven构建,使用Maven -resources-plugin将内容从/angular/dist移动到我的发行版的根目录(即$project.build.directory}/MyJavaApplication)。Angular默认从war的根目录加载资源。
当我开始在我的angular项目中添加路由时,我进一步修改了maven build,将index.html从/dist复制到WEB-INF/app。并且,添加了一个Java控制器,将所有服务器端rest调用重定向到索引。