How to set base url for Angular application

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?

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>

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

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

Please follow these following steps:

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

Here is the solution that comes closest to what I wanted:

Rename src/main/webapp/index.html to src/main/webapp/crud.html

Create a new file src/main/webapp/index.html, with whatever static content you want to serve on /. Alternatively, you can have a Spring Boot Controller serve /.

Changes to webpack/webpack.common.js:

Under new HtmlWebpackPlugin, add this entry:

filename: 'crud/index.html'

Under new CopyWebpackPlugin, add this entry:

{ from: './src/main/webapp/index.html', to: 'index.html' }

and rename the template:

template: './src/main/webapp/crud.html',

Under modules/rules/*.html, rename the html file as well:

exclude: /(src\/main\/webapp\/crud.html)/

In the crud.html file, I changed the base to this, as others already stated:

<base href="/" />.

This is needed to find the backend APIs, which are still on /api/

These were all the changes I had to make. Now / and /index.html will serve my own non-jhipster page. All JHipster is served under /crud/index.html. Once you start navigating, the address in the browser will show /#/, but that does not bother me that much for now. But will be glad to hear how to change that to /crud/ as well.

Chandan Agarwal

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.

来源：https://stackoverflow.com/questions/55705637/how-to-set-base-url-for-angular-application

标签

angular

jhipster