How to set base url for Angular application

Question

I have an Angular application as generated by JHipster. By default, it runs on the root / url, and redirects to /#/. Is there a way to override it to something else?

edit

Sorry, I have to rephrase my question, as it is misinterpreted in all answers below. I want to land my JHipster generated Angular application on something other than /, eg /crud/. The purpose is to serve some non-Angular content on /. How can I move the entire application from / to /crud/? And still have / served by a static index.html file?

isn't there a property in angular.json? `root` alternatively you can always create a property in the environment.json and pass it on the solution as a constant to build your urls — rmjoia, Apr 16 '19 at 10:09

score 29 · Accepted Answer · answered Apr 16 '19 at 10:23

29

Better to do it when you build project. Like this:

ng build --prod --base-href=/test/

answered Apr 16 '19 at 10:23

qwerty

679
5
12

This works especially well if, for example, you want to develop locally with the base href as the site root but want the base href to be something different when it is formally built and deployed to a server. – Joe Newton Jan 17 '20 at 15:29
1

Please note, that both slashes are necessary in the `/test/`- I missed one and struggled for a while to find the reason. – eddyP23 Mar 23 '20 at 16:46
@eddyP23 you saved my day!... ending slash fixes the issue. i almost gave on this issue. angular doc doesn't say anything important. – Sri May 12 '20 at 00:38

score 7 · Answer 2 · answered Apr 16 '19 at 10:16

7

You can modify it using <base href="/"> in src/index.html file.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>SiteFrontend</title>
    <base href="/test">   //<------ this line

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

answered Apr 16 '19 at 10:16

gunjit

149
6

This is a great tip. I was able to do it in the container on the fly to verify the fix works, without having to modify the image first. – Eternal21 Aug 28 '22 at 20:43

score 5 · Answer 3 · answered Apr 16 '19 at 12:01

5

Please follow these following steps:

Set useHash: false in app-routing-module.ts
In index.html, change <base href="./" /> to <base href="/" />

answered Apr 16 '19 at 12:01

Ayon Alfaz

96
1
6

score 2 · Answer 4 · edited May 31 '21 at 10:18

2

Use ng build --prod --base-href=/test and not ng build --prod --base-href=/test/ because that way I won't load the images

edited May 31 '21 at 10:18

deelde

1,540
13
23

answered May 28 '21 at 22:24

sm18

21
2

score 1 · Answer 5 · edited Jul 30 '19 at 15:53

1

Below steps are for setting base url to /crud in production only which has worked for me

in webpack.prod.js add the following in plugins section:
```
new BaseHrefWebpackPlugin({ baseHref: '/crud' })
```
in webpack.prod.js in the output section add:
```
publicPath: '/crud/',
```

On executing npm run build the index.html will prefix baseHref with '/crud' and also add prefix 'crud' to all the css and urls.

edited Jul 30 '19 at 15:53

Samuel Philipp

10,631
12
36
56

answered Jul 30 '19 at 15:34

Chandan Agarwal

406
5
12

How to set base url for Angular application

5 Answers5

Linked