如何为 Angular 应用程序设置基本 url答案

【问题标题】：How to set base url for Angular application如何为 Angular 应用程序设置基本 url
【发布时间】：2019-09-06 09:45:57
【问题描述】：

我有一个由 JHipster 生成的 Angular 应用程序。默认情况下，它在根/ url 上运行，并重定向到/#/。有没有办法将它覆盖到别的东西？

编辑

抱歉，我必须重新表述我的问题，因为它在下面的所有答案中都被误解了。我想将我的 JHipster 生成的 Angular 应用程序放在/ 以外的其他地方，例如/crud/。目的是在/ 上提供一些非 Angular 内容。如何将整个应用程序从 / 移动到 /crud/？并且仍然有 / 由静态 index.html 文件提供服务？

【问题讨论】：

angular.json 中没有属性吗？ root 或者，您始终可以在 environment.json 中创建一个属性并将其作为常量传递给解决方案以构建您的 url

标签： angular jhipster

【解决方案1】：

使用ng build --prod --base-href=/test 而不是ng build --prod --base-href=/test/，因为那样我不会加载图像

【讨论】：

【解决方案2】：

以下步骤仅用于在生产中将基本 url 设置为 /crud，这对我有用

在webpack.prod.js插件部分添加以下内容：
```
new BaseHrefWebpackPlugin({ baseHref: '/crud' })
```
在webpack.prod.js的输出部分添加：
```
publicPath: '/crud/',
```

在执行npm run build 时，index.html 将在 baseHref 前面加上 '/crud' 并在所有 css 和 url 中添加前缀 'crud'。

【讨论】：

【解决方案3】：

请按照以下步骤操作：

在app-routing-module.ts 中设置useHash: false
在index.html 中，将<base href="./" /> 更改为<base href="/" />

【讨论】：

【解决方案4】：

最好在构建项目时这样做。像这样：

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

【讨论】：

这种方法特别适用，例如，如果您想使用基本 href 作为站点根进行本地开发，但希望基本 href 在正式构建并部署到服务器时有所不同。
请注意，/test/ 中的两个斜线都是必需的 - 我错过了一个，并挣扎了一段时间才找到原因。
@eddyP23 你拯救了我的一天！...结束斜线解决了这个问题。我几乎放弃了这个问题。角度文档没有说任何重要的东西。

【解决方案5】：

您可以在src/index.html 文件中使用<base href="/"> 对其进行修改。

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

【讨论】：