一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
当前回答
我想说的是,很多在使用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调用重定向到索引。
其他回答
为了快速廉价地托管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
这是所有!您的应用程序应该正在运行!
我想说的是,很多在使用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调用重定向到索引。
希望这能有所帮助,希望我能在这周尝试一下。
在Azure上创建Web应用程序 在vs code中创建Angular 2应用。 Webpack到bundle.js。 下载Azure站点发布的概要文件xml 配置Azure-deploy using https://www.npmjs.com/package/azure-deploy与网站简介。 部署。 尝尝奶油。
对于那些看到“加载模块脚本失败:…”的错误。简单的去你的棱角分明。将“OutputPath”改为“dist”。然后运行ng build——configuration production来构建你的应用。
原因是angular认为你的应用程序在根目录下,但如果你不做这个更改,它就在根目录/YourAppName下