我自横刀向天笑,去留肝胆两昆仑。这篇文章主要讲述在Jersey webapp中运行Angular2应用程序相关的知识,希望能为你提供帮助。
我有两个不同的项目,一个用于Angular2中的前端,另一个用于后端,在java中使用Jersey。
【在Jersey webapp中运行Angular2应用程序】我想要实现的是让前端应用程序由服务器提供服务,该服务器也为后端提供服务(从而避免了CORS头部配置)。
但是在使用命令ng build --output-path PATH/TO/WEBAPP-FOLDER
构建角度应用程序时遇到问题。
当服务器启动并且我转到PATH/TO/WEBAPP-FOLDER/index.html
(我的角度应用程序启动的地方)时,当浏览器请求我的索引页面中包含的JS文件时,我遇到了很多404错误,尽管我的文件夹结构包含它们。
我是否需要在Angular配置中执行某些操作才能正确地为JS文件提供服务?
我的webapp文件夹结构是:
-assets/
-favicon.ico
-index.html
-inline.bundle.js
-inline.bundle.js.map
-main.bundle.js
-main.bundle.js.map
-polyfills.bundle.map
-polyfills.bundle.js.map
-styles.bundle.js
-styles.bundle.js.map
-vendor.bundle.js
-vendor.bundle.js.map
-WEB-INF
web.xml (this is for Jersey)
我生成的
index.html
页面是:<
!DOCTYPE html>
<
html>
<
head>
<
base href="https://www.songbingjia.com/">
<
title>
Angular QuickStart<
/title>
<
base href="https://www.songbingjia.com/">
<
meta charset="UTF-8">
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="stylesheet" href="https://www.songbingjia.com/android/styles.css">
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<
!-- Polyfill(s) for older browsers -->
<
script src="https://www.songbingjia.com/android/node_modules/core-js/client/shim.min.js">
<
/script>
<
script src="https://www.songbingjia.com/android/node_modules/zone.js/dist/zone.js">
<
/script>
<
script src="https://www.songbingjia.com/android/node_modules/systemjs/dist/system.src.js">
<
/script>
<
script src="https://www.songbingjia.com/android/systemjs.config.js">
<
/script>
<
script>
System.import('main.js').catch(function (err) { console.error(err);
});
<
/script>
<
/head>
<
body>
<
my-app>
Loading AppComponent content here ...<
/my-app>
<
script type="text/javascript" src="https://www.songbingjia.com/android/inline.bundle.js">
<
/script>
<
script type="text/javascript" src="https://www.songbingjia.com/android/polyfills.bundle.js">
<
/script>
<
script type="text/javascript" src="https://www.songbingjia.com/android/styles.bundle.js">
<
/script>
<
script type="text/javascript" src="https://www.songbingjia.com/android/vendor.bundle.js">
<
/script>
<
script type="text/javascript" src="https://www.songbingjia.com/android/main.bundle.js">
<
/script>
<
/body>
<
/html>
此外,
systemjs.config.js
文件无处可寻。我没有正确运行构建命令吗?答案您可能需要考虑在index.html中使用base href。基本标记中的href指定页面中所有相对URL的基本URL。因此,当您使用输出路径“PATH / TO / WEBAPP-FOLDER”构建时,您可能想尝试给出基础href =https://www.songbingjia.com/android/“PATH / TO / WEBAPP-FOLDER”。这将从“domain-name / PATH / TO / WEBAPP-FOLDER”提供应用程序。
另一答案我和Angular(4)和Java / Spring有类似的情况。与OP类似,为了解决CORS设置问题,我将整个Angular应用程序内容(从CLI生成的文件夹/ my-app)复制到名为/ angular的新文件夹中,该文件夹位于我的Java Maven项目的根目录下。我制作了一个自定义构建文件来运行
ng build --base-href /my-java-project/
然后在maven构建期间,使用maven-resource-plugin将/ dist内容从/ angular / dist移动??到$ {project.build.directory} / my-java-project。默认情况下,angular将尝试在部署的根目录中查找资源。
推荐阅读
- Jersey(如何注册省略某些子类的ExceptionMapper())
- Jersey ExceptionMapper未被调用
- 找不到模块(无法解析'./AppRoutes')
- 将Redux SubApp与React Router配合使用
- 在android中获取位置地址时出错
- 接收广播Intent时出错{act = android.location.PROVIDERS_CHANGED flg = 0x10}
- 获取当前lat长的android
- 经度和纬度GPSTracker Android总是返回0,0
- Android服务在其仍处于活动状态时停止后台处理