I use Angular 4 at work for building a single page application. Today, I faced the problem where I had to use different base paths for router and static assets. Angular makes use of the base href to tell router how to compose navigation URLs. If your application exists at the root, then you can use / as the href value as shown below.
<base href="/">I wanted to use /users as my application base for router and /public as base for my assets.
If you build the project the Angular project for the production environment using the default values you will get the following index.html generated.
$ ng build -prod
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SampleNgApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.xxxx.bundle.css" rel="stylesheet"/></head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
This generated page will not work as it router will use / as base for composing navigation URLs and static assets will be looked in the current directory.
To solve my problem, I used —-base-href and —-deploy-url options as shown below.
$ ng build -prod --base-href /users --deploy-url /public
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SampleNgApp</title>
<base href="/users">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="/public/styles.xxxx.bundle.css" rel="stylesheet"/></head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
This way I solved my problem.
Shekhar Gulati 
What about your favicon? It resides in ‘assets’, yet the path is not prefixed with ‘/public’.
I also stumbled on that same problem. We have no access to the root, only get a subfolder and add that using this described method. But that breaks our favicon, since favicon does not seem to respect base href, even if we put it in front of it.
Hi Shekhar, thanks for the write-up, straight to the point and very useful!
lol, what about those static files which are in `src/assets/` folder?
if you put another slash after /users you will not need to specify deploy-url. Example: –base-href /users/
You are right! and this even fixes the favicon problem. Thank you 🙂
Thanks a lot it helped to solve my issue
Short and sweet! Thank you 🙂
Thanks for this post. I have a spring-boot, angular proj; where I am trying to deploy frontend to work on 8080 instead of these 2 running on different ports. I changed outputPath to resources/static and using ng build –base-href / –deploy-url /static generates index.html and .js files in output path . But starting tomcat server I don’t see its serving front-end. I see in the generated index.html, scripts have static/runtime.js etc. But accessing it with or without /static/ in URI I do not see UI.
Is there something else I should be trying?
what if I need to invoke my angular app from legacy web application? Lets say I have a URL in JSP and by hitting url, it should launch the angular app. How to achieve this?
This is what was required. Thanks
Excelente!!!!!!!! justo lo que necesitaba
Is this configurable in the angular.json file? It seems unusual that I should need to specify `–base-href` every time I build.