Angular 4 Routes/RouterModule affecting path after domain

Question

My Angular app is being hosted on a server that I am not in control of and that I can only access by navigating to this link.

externalServer.com/myAppName

Whenever I navigate to this link, I should see /#/home after myAppName but instead I see this.

externalServer.com/#/home

The issue is that myAppName is being removed from the path. The URL that I want to see is this.

externalServer.com/myAppName/#/home

My question is this. Is it possible that the Angular RouterModule or Routes component is causing this issue of the myAppName portion on the path being truncated off? Or is the issue unrelated to Angular?

I am not familiar enough with Angular to know whether this is an issue with routes or something completely different, so I'm just trying to figure out where to put my energy. I assume that if this is something that is fixable with Angular then the change would probably be needed in the app.module.ts file, so I will post that below. Thanks for the help.

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 { }

Answer 1

I was able to find another post that answered my question. The link is below.

Angular 2 / 4 / 5 - Set base href dynamically

Also, below is my updated app.module.ts file with the changes that allow the app to be run with any starting path.

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 { }