在Jersey webapp中运行Angular2应用程序

Question

我有两个不同的项目，一个用于Angular2中的前端，另一个用于后端，在Java中使用Jersey。

我想要实现的是让前端应用程序由服务器提供服务，该服务器也为后端提供服务（从而避免了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="/">
  <title>Angular QuickStart</title>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="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="node_modules/core-js/client/shim.min.js"></script>

  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>

  <script src="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="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

</html>

此外，systemjs.config.js文件无处可寻。我没有正确运行构建命令吗？

Answer 1

另一答案