Angular 4 Routes/RouterModule 影响域后的路径答案

【问题标题】：Angular 4 Routes/RouterModule affecting path after domainAngular 4 Routes/RouterModule 影响域后的路径
【发布时间】：2019-01-20 16:46:49
【问题描述】：

我的 Angular 应用程序托管在我无法控制的服务器上，我只能通过导航到此链接来访问。

externalServer.com/myAppName

每当我导航到此链接时，我应该在myAppName 之后看到/#/home，但我看到的是这个。

externalServer.com/#/home

问题是myAppName 正在从路径中删除。我想看的网址是这个。

externalServer.com/myAppName/#/home

我的问题是这样的。 Angular RouterModule 或 Routes 组件是否可能导致路径上的 myAppName 部分被截断？还是这个问题与 Angular 无关？

我对 Angular 不够熟悉，不知道这是路线问题还是完全不同的问题，所以我只是想弄清楚我应该把精力放在哪里。我假设如果这是可以通过 Angular 解决的问题，那么 app.module.ts 文件中可能需要进行更改，所以我将在下面发布。感谢您的帮助。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { DesktopUiComponent } from './desktop-ui/desktop-ui.component';
import { MobileUiComponent } from './mobile-ui/mobile-ui.component';
import { RouterComponent } from './router/router.component';


const appRoutes: Routes = [
  { path: 'home', component: RouterComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  declarations: [
    AppComponent,
    DesktopUiComponent,
    MobileUiComponent,
    RouterComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes, { useHash: true })
  ],
  exports: [
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

在构建时，是否将myAppName 作为 base-href 参数传递？我假设您使用的是Angular CLI。
@R.Richards 我不知道那个参数。不过，我只是对其进行了一些研究，这似乎是正确的解决方案。不过我有一个小问题，那就是这个应用程序将部署在多个服务器上，这些服务器都有不同的起始路径。你知道正则表达式是否可以用作base-href值吗？
我不知道这是否可行。我没有尝试过，也没有看到它完成。
好的，你已经帮了我很多了。谢谢！
随时！祝你好运找到解决方案。

标签： angular routes angular-router

【解决方案1】：

我能够找到另一个回答我的问题的帖子。链接如下。

Angular 2 / 4 / 5 - Set base href dynamically

另外，下面是我更新的 app.module.ts 文件，其中包含允许应用以任何起始路径运行的更改。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { DesktopUiComponent } from './desktop-ui/desktop-ui.component';
import { MobileUiComponent } from './mobile-ui/mobile-ui.component';
import { RouterComponent } from './router/router.component';


const appRoutes: Routes = [
  { path: '', component: RouterComponent }
];

export function getBaseLocation() {
    let paths: string[] = location.pathname.split('/').splice(1, 1);
    let basePath: string = (paths && paths[0]) || '';
    return '/' + basePath;
}

@NgModule({
  declarations: [
    AppComponent,
    DesktopUiComponent,
    MobileUiComponent,
    RouterComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ],
  providers: [{ provide: APP_BASE_HREF, useFactory: getBaseLocation }],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：