How to force Angular cli to serve the bundle files from an absolute location rather then base-href

问题

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

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

The cli build command I'm using is:

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

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>

which means that these files will be requested with /main prefix, e.g 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.

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>

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

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

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

Thanks!

回答1:

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

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>

回答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/. But I can't see any UI when starting tomcat on localhost:8080/ . 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:

<!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. Even though I used ng build --deploy-url="/" it created scripts in index.html as

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

来源：https://stackoverflow.com/questions/43741249/how-to-force-angular-cli-to-serve-the-bundle-files-from-an-absolute-location-rat

标签

Spring

angular

Tomcat

spring-boot

angular-cli