网址中未显示Angular Base href

问题描述

我正在尝试将我的角度应用程序部署到生产环境中，该生产环境在url中具有附加的定位步骤，例如附加到其上的www.production-server.com/name-of-my-app.

I am trying to deploy my angular application to a production environment that has an additional location step in url e.g. www.production-server.com/name-of-my-app appended to it.

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

My application works just fine when I run it through angular cli on localhost:4200 and redirects through pages like it is supposed to for example from localhost:4200/page1 to localhost:4200/page2.

但是当我尝试设置基本href

But when I try to set the base href

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

并按以下方式配置我的路线:

and configure my Routes like this:

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-my-app/page2.为什么会这样?

The application still routs localhost:4200/page1 to page localhost:4200/page2 instead of localhost:4200/name-of-my-app/page1 and localhost:4200/name-of-my-app/page2. Why is that?

我想补充一点，当我检查页面时，基本href正确显示.但它不会显示在URL中.

I would like to add that the base href is showing up correctly when I inspect the page. But it doesn't show up in the URL.

在这张图片上看到的

推荐答案

基本href仅在生产中使用.如果您仍想在部署之前查看其行为，则可以尝试以下操作:

The base href is used only in production. If you still want to see how it behaves before deployment you could try the following:

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

On the first terminal, run the ng build command in watch mode to compile the application to the dist folder:

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

在第二个终端上，安装Web服务器(例如lite-server)，然后在输出文件夹上运行它.例如:

On the second terminal, install a web server (such as lite-server), and run it against the output folder. For example:

lite-server --baseDir="dist"

您可以从官方文档此处中了解更多信息.

You can read more about it from the official docs here.

这篇关于网址中未显示Angular Base href的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！