如何强制Angular CLI从绝对位置而不是base-href提供捆绑文件 [英] How to force Angular cli to serve the bundle files from an absolute location rather then base-href

问题描述

我正在努力将使用cli构建的Angular 4项目部署到Spring引导服务器上.

I'm struggling with deploying Angular 4 project built with cli to a Spring boot server.

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

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).

我正在使用的cli build命令是:

The cli build command I'm using is:

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

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

Which creates the main folder in the webapp, with the index.html containing the following script tags:

<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

which means that these files will be requested with /main prefix, e.g localhost:8080/main/inline.bundle.js

这对于基本应用程序来说很好，但是当将路由添加到有角度的应用程序时就成为一个问题(在春季，我使用/main为所有路径提供index.html，以允许有角度的路由正常工作，这会导致捆绑包也以/main开头.

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.

如何强制生成的脚本标记使用自定义位置?或者至少指定绝对位置，而不中继基本href(因此我可以将outDir属性更改为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).

所需的解决方案是这样的:

The desired solution would be something like this:

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

我考虑过添加一个可能会在ng build之后执行的脚本，该脚本将修改script标签，但这是一个肮脏的解决方案，并且不能与 ng build --watch 一起使用，这对发展至关重要...

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

作为参考，以下是映射/main请求的Spring控制器函数:

For reference, here is the Spring controller function that maps the /main requests:

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

谢谢！

推荐答案

这是ng build Wiki:请使用--deploy-url="/main-app/"选项.这将生成:

please use --deploy-url="/main-app/" option. 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>

这篇关于如何强制Angular CLI从绝对位置而不是base-href提供捆绑文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！