Question

我正在努力将使用cli构建的Angular 4项目部署到Spring启动服务器。

在 .angular-cli.json 中，我添加了outdir属性，该属性指向Spring webapp文件夹中的自定义文件夹，该文件夹可直接在服务器（webapp / main）中访问。

我正在使用的cli构建命令是：

ng build --base-href /main/ -a main

在webapp中创建主文件夹，index.html包含以下脚本标记：

<base href="/main/">
...
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script></body>

这意味着将使用/ main前缀请求这些文件，例如 localhost：8080 / main / inline.bundle.js

对于基本应用程序来说这很好，但是当路由被添加到角度应用程序时会成为一个问题（在Spring中，我使用/ main为所有路径提供index.html，以允许角度路由正常工作，导致捆绑的重定向循环，，因为它们以/ main开头。

如何强制生成的脚本标记使用自定义位置？或至少指定绝对位置，而不是基于href的中继（因此我可以将outDir属性更改为main-应用程序，问题解决了。）

理想的解决方案是这样的：

<script type="text/javascript" src="/main-app/main.bundle.js"></script>

我想过可能会添加一个脚本，它将在修改脚本标签的ng构建之后执行，但它是一个肮脏的解决方案，也不适用于 ng build --watch ，这对发展至关重要......

作为参考，这里是映射/ main请求的Spring控制器函数：

@RequestMapping("main/**")
public String mainRoute(HttpServletRequest request) {
       return "/main/index.html";
}

谢谢！

Answer 1

以下是ng build wiki：https://github.com/angular/angular-cli/wiki/build

请使用--deploy-url="/main-app/"选项。这将产生：

<script type="text/javascript" src="/main-app/inline.bundle.js"></script>
<script type="text/javascript" src="/main-app/polyfills.bundle.js"></script>
<script type="text/javascript" src="/main-app/scripts.bundle.js"></script>
<script type="text/javascript" src="/main-app/styles.bundle.js"></script>
<script type="text/javascript" src="/main-app/vendor.bundle.js"></script>
<script type="text/javascript" src="/main-app/main.bundle.js"></script>

Answer 2

我遇到了类似的问题，我使用ng build并在输出路径中生成文件（index.html，main.js，polufills.js，styles.js等）（已将此路径设置为angular .json）-资源/静态/。但是在localhost：8080 /上启动tomcat时，我看不到任何UI。我相信它无法加载任何静态文件，不确定我错过了什么，或者我们如何使部署更容易。

我做了一个控制器来服务前端部分：

@GetMapping("/")
public String index() {
    return "forward:/index.html";
}

我的index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello App</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

但是当tomcat运行时仍然没有用户界面。即使我使用ng build --deploy-url="/"，它也以

的形式在index.html中创建了脚本

<script type="text/javascript" src="/runtime.js"></script>
<script type="text/javascript" src="/polyfills.js"></script>
<script type="text/javascript" src="/styles.js"></script>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/main.js"></script>

让它在http://localhost:8080/上显示任何UI内容仍然没有运气

如何强制Angular cli从绝对位置而不是base-href提供bundle文件

2 个答案: