Angular:通过环境设置 APP_BASE_HREF 无效

Question

在我的 Angular 应用程序中，我想使用环境来设置 <base href="">自动。

我的 app.module.ts 中有以下相关行:

...
import { APP_BASE_HREF } from "@angular/common";
import { environment } from "../environments/environment";
...

...
providers: [
    { provide: APP_BASE_HREF, useValue: environment.baseHref },
    ...
  ]
...

这是我的环境文件:

environment.ts :

export const environment = {
  ...,
  baseHref: "/app/"
};

environment.prod.ts :

export const environment = {
  ...
  baseHref: "/"
};

但是，当使用 ng build 时或 ng build --prod ，这两个配置都没有应用于生成的 index.html .

我的配置:

• 操作系统:Windows 10 x64
• Angular v4.2.4
• Angular CLI v1.1.1

感谢您抽出宝贵时间!

Answer 1

那是因为 APP_BASE_HREF仅与 PathLocationStrategy 一起使用, 它不会改变 index.html 基础 href。您应该为该 --base-href 使用命令行选项:

ng build --prod --base-href /

来自指南:

Some developers may not be able to add the element, perhaps because they don't have access to or the index.html.

Those developers may still use HTML5 URLs by taking two remedial steps:

• Provide the router with an appropriate APP_BASE_HREF value.
• Use root URLs for all web resources: CSS, images, scripts, and template HTML files.