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

Question

I'm struggling with deploying Angular 4 project built with cli to a Spring boot server. 我正在努力将使用cli构建的Angular 4项目部署到Spring引导服务器。

In the .angular-cli.json I added outdir property, which points to a custom folder inside Spring webapp folder, which is accessible directly in the server (webapp/main). 在.angular-cli.json中，我添加了outdir属性，它指向Spring webapp文件夹中的自定义文件夹，可以直接在服务器（webapp / main）中访问。

The cli build command I'm using is: 我正在使用的cli构建命令是：

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

Which creates the main folder in the webapp, with the index.html containing the following script tags: 这将在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>

which means that these files will be requested with /main prefix, eg localhost:8080/main/inline.bundle.js 这意味着将使用/ main前缀请求这些文件，例如localhost：8080 / main / inline.bundle.js

Which is fine for a basic app, but becomes an issue when routes are added to the angular app (In Spring, I'm serving the index.html for all paths with /main, to allow the angular routes to work properly, which cause a redirect loop for the bundles, as they are starting with /main as well . 这对于基本应用程序来说很好，但是当路由被添加到角度应用程序时会成为问题（在Spring中，我使用/ main为所有路径提供index.html，以允许角度路由正常工作，这会导致捆绑包的重定向循环， 因为它们也以/ main开头 。

How can I force the generated script tags to use a custom location? 如何强制生成的脚本标记使用自定义位置？ Or at least specifiy the absolute location, and not relay on the base href (so I can change the outDir property to main-app, and problem solved). 或者至少指定绝对位置，而不是基于href的中继（所以我可以将outDir属性更改为main-app，并解决问题）。

The desired solution would be something like this: 理想的解决方案是这样的：

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

I thought of maybe adding a script that will execute after the ng build which will modify the script tags, but it's a dirty solution, and also won't work with ng build --watch , which is crucial for development... 我想过可能会添加一个脚本，它将在ng构建之后执行，它将修改脚本标签，但它是一个肮脏的解决方案，也不适用于ng build --watch ，这对开发至关重要......

For reference, here is the Spring controller function that maps the /main requests: 作为参考，这里是映射/ main请求的Spring控制器函数：

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

Thanks! 谢谢！

Answer 1

Here is ng build wiki: https://github.com/angular/angular-cli/wiki/build 这是ng build wiki： https ： //github.com/angular/angular-cli/wiki/build

please use --deploy-url="/main-app/" option. 请使用--deploy-url="/main-app/"选项。 this will generate: 这会产生：

<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

I am running into a similar issue where I used ng build and it generates files(index.html, main.js, polufills.js , styles.js etc) in output path(have set this path in angular.json) - resource/static/. 我遇到了类似的问题，我使用ng build并在输出路径中生成文件（index.html，main.js，polufills.js，styles.js等）（已在angular.json中设置此路径） - resource /静态的/。 But I can't see any UI when starting tomcat on localhost:8080/ . 但是在localhost：8080 /上启动tomcat时我看不到任何UI。 I believe it's not able to load any of the static files, not sure what I missed or how can we make deployment easier. 我相信它无法加载任何静态文件，不确定我错过了什么或者我们如何使部署更容易。

I made a controller to serve the front-end part: 我制作了一个控制器来为前端部分服务：

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

My 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>

But still no user interface when tomcat is running. 但是当tomcat运行时仍然没有用户界面。 Even though I used ng build --deploy-url="/" it created scripts in index.html as 即使我使用了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>

Still no luck in getting it to show any UI content on http://localhost:8080/ 仍然没有运气让它在http：// localhost：8080 /上显示任何UI内容

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

问题描述

2 个解决方案

解决方案1
7 已采纳 2017-05-02 15:18:50

解决方案2
0 2018-09-06 19:47:42

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

问题描述

2 个解决方案

解决方案1 7 已采纳 2017-05-02 15:18:50

解决方案2 0 2018-09-06 19:47:42

解决方案1
7 已采纳 2017-05-02 15:18:50

解决方案2
0 2018-09-06 19:47:42