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

When you did your build, did you pass `myAppName` as the base-href parameter? I am assuming you are using the [Angular CLI](https://github.com/angular/angular-cli/wiki/build). — R. Richards, Aug 13 '18 at 21:54
@R.Richards I was not aware of that parameter. I just researched it a little bit though and it seems like the correct solution. I have a small issue though and that is that this app will be deployed on multiple servers which will all have a different starting path. Do you know if regular expressions can be used as the base-href value? — NewUser9402, Aug 13 '18 at 22:29
I don't know if that will work. I have not tried, nor have I seen it done. — R. Richards, Aug 13 '18 at 22:31

score 1 · Accepted Answer · answered Aug 15 '18 at 16:09

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

Angular 4 Routes/RouterModule affecting path after domain

1 Answers1