一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
当前回答
您可以构建用于生产的应用程序
ng build --configuration=production
然后你可以检查你的角度。它的值通常是dist,但也可以是不同的。
"build": {
"options": {
"outputPath": "dist"
使用dist作为值,生成的输出文件将放在/dist文件夹下
在构建angular项目时,你的项目将只由静态文件Html、Javascript、Css和图像或其他资产组成。正因为如此,你所需要的只是一个可以向客户端提供静态文件的web服务器。就这么简单。可以是nginx, tomcat,任何可以将这些静态文件提供给客户端的东西。这在angular的文档中也有说明
因为这些文件是静态的,你可以把它们托管在任何web服务器上 具备文件服务能力
你在outputPath下构建的项目已经包含了一个index.html,它将自动导入所有必要的文件,所以当index.html被传递给客户端时,浏览器也将获取所有其他必要的文件。必要的信息已经包含在index.html中。
你的第二个问题
我用gulp缩小它们吗
官方的方式
角。Json将包含每个环境的特定配置,其中之一将是优化
优化可以是布尔值(true, false)
"configurations": {
"production": {
"optimization": true --> will mean true for all properties of the next custom object
优化也可以是一个自定义对象
"configurations": {
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": true
},
"fonts": true
}
切换到"scripts": false将导致.js文件不会被缩小
同时切换到样式-> "minify": false也将避免样式缩小。
不管角的构型是什么。Json进行优化,它可以被覆盖,如果你在构建过程中提供一个参数。因此,通过执行ng build——configuration=production——optimization=false,它将构建用于生产的项目,并将值false应用到优化对象的每个属性,这实际上将禁用所有的最小化。
其他回答
点击下面的链接,
修改Index.html页面的脚本文件路径 改变你的component.html路径,以防你的获取错误无法找到位置
https://angular.io/docs/ts/latest/guide/deployment.html !# dev-deploy
为了快速廉价地托管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 -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
这是所有!您的应用程序应该正在运行!
您可以构建用于生产的应用程序
ng build --configuration=production
然后你可以检查你的角度。它的值通常是dist,但也可以是不同的。
"build": {
"options": {
"outputPath": "dist"
使用dist作为值,生成的输出文件将放在/dist文件夹下
在构建angular项目时,你的项目将只由静态文件Html、Javascript、Css和图像或其他资产组成。正因为如此,你所需要的只是一个可以向客户端提供静态文件的web服务器。就这么简单。可以是nginx, tomcat,任何可以将这些静态文件提供给客户端的东西。这在angular的文档中也有说明
因为这些文件是静态的,你可以把它们托管在任何web服务器上 具备文件服务能力
你在outputPath下构建的项目已经包含了一个index.html,它将自动导入所有必要的文件,所以当index.html被传递给客户端时,浏览器也将获取所有其他必要的文件。必要的信息已经包含在index.html中。
你的第二个问题
我用gulp缩小它们吗
官方的方式
角。Json将包含每个环境的特定配置,其中之一将是优化
优化可以是布尔值(true, false)
"configurations": {
"production": {
"optimization": true --> will mean true for all properties of the next custom object
优化也可以是一个自定义对象
"configurations": {
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": true
},
"fonts": true
}
切换到"scripts": false将导致.js文件不会被缩小
同时切换到样式-> "minify": false也将避免样式缩小。
不管角的构型是什么。Json进行优化,它可以被覆盖,如果你在构建过程中提供一个参数。因此,通过执行ng build——configuration=production——optimization=false,它将构建用于生产的项目,并将值false应用到优化对象的每个属性,这实际上将禁用所有的最小化。
如果你在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>