Angular 基本 href 未显示在 URL 中

Question

我正在尝试将我的 angular 应用程序部署到生产环境中，该生产环境在 url 中有一个额外的位置步骤，例如www.production-server.com/name-of-my-app附加到它。

我的应用程序在运行通过 angular cli on localhost:4200 并通过页面重定向时工作正常，例如从 localhost:4200/page1到 localhost:4200/page2.

但是当我尝试设置基本 href 时

 "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "baseHref" : "/name-of-my-app/",
            "outputPath": "dist",
            "index": "src/index.html",
...

并像这样配置我的路线：

const routes: Routes = [
  Route.withShell([
    {path: '', redirectTo: '/sredstva', pathMatch: 'full'},
    {path: 'sredstva', component: OsebnasredstvaComponent, data: {title: extract('Osebna sredstva')}}
  ])
];


/**
 * Provides helper methods to create routes.
 */
export class Route {

  /**
   * Creates routes using the shell component and authentication.
   * @param routes The routes to add.
   * @return {Route} The new route using shell as the base.
   */
  static withShell(routes: Routes): ngRoute {
    return {
      path: '',
      component: ShellComponent,
      children: routes,
      canActivate: [AuthenticationGuard],
      // Reuse ShellComponent instance when navigating between child views
      data: { reuse: true }
    };
  }

}

应用程序仍然将 localhost:4200/page1 路由到页面 localhost:4200/page2 而不是 localhost:4200/name-of-my-app/page1 和 localhost:4200/name-of-my-app/page2 .这是为什么？

编辑：我想补充一点，当我检查页面时，基本 href 正确显示。但它没有出现在 URL.

中

As seen on this picture

Answer 1

基本 href 仅在生产中使用。如果您仍想在部署前查看它的行为方式，您可以尝试以下操作：

在第一个终端，运行监视模式下的ng build命令将应用程序编译到dist文件夹：

ng build --watch --outputPath=outputPath --baseHref=baseHref

在第二个终端上，安装一个 web 服务器（比如 lite-server），运行它对着输出文件夹。例如：

lite-server --baseDir="dist"

您可以从官方文档中了解更多信息 here。

Answer 2

尝试运行

$ ng build --prod --base-href="add/your/base/url/here"

Angular 基本 href 未显示在 URL 中

Angular base href not showing up in URL

routing

href

angular-routing

angular