一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
当前回答
如果你像我一样在localhost上测试应用程序,或者你会有一些空白白页的问题,我使用这个:
ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"
解释:
ng build
构建应用程序,但在代码中有许多空格,制表符和其他东西,使代码能够被人类阅读。对于服务器来说,代码看起来如何并不重要。这就是为什么我使用:
ng build --prod --build-optimizer
这使得代码可以用于生产并减少大小[——build-optimizer]允许减少更多的代码]。
所以最后我添加——base-href="http://127.0.0.1/my-app/"来显示应用程序在哪里是'主框架'[简单的话]。有了它,你甚至可以在任何文件夹中拥有多个angular应用。
其他回答
点击下面的链接,
修改Index.html页面的脚本文件路径 改变你的component.html路径,以防你的获取错误无法找到位置
https://angular.io/docs/ts/latest/guide/deployment.html !# dev-deploy
我用永远:
使用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中,你可以使用以下命令:
ng build --prod
它生成一个dist文件夹,其中包含部署应用程序所需的所有内容。
如果你没有使用web服务器的经验,我建议你使用Angular to Cloud。你只需要把dist文件夹压缩成zip文件,然后上传到平台上。
为了快速廉价地托管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上。
如果你像我一样在localhost上测试应用程序,或者你会有一些空白白页的问题,我使用这个:
ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"
解释:
ng build
构建应用程序,但在代码中有许多空格,制表符和其他东西,使代码能够被人类阅读。对于服务器来说,代码看起来如何并不重要。这就是为什么我使用:
ng build --prod --build-optimizer
这使得代码可以用于生产并减少大小[——build-optimizer]允许减少更多的代码]。
所以最后我添加——base-href="http://127.0.0.1/my-app/"来显示应用程序在哪里是'主框架'[简单的话]。有了它,你甚至可以在任何文件夹中拥有多个angular应用。