How to make base href / IIS virtual directory case insensitive for angular app?

user_218640 0
Viewed 1153

There is similar question without proper answer.

If I set in app.module.ts:

providers: [
  { provide: APP_BASE_HREF, useValue: '/my/app'},

and type localhost:4200/my/app

this.location.path()

returns the correct path "".

However if I type localhost:4200/my/App

this.location.path()

returns "/my/App" which is wrong.

For reasons beyond this question I make checks for the URL. So my question is: how to make base href case insensitive?

I assume that installation on IIS fails for same reason.

angular-router angular-routing angular
2 Answers

I think the best way may be to force IIS to redirect the user to my/app by using rewrite rules. However I don't know IIS, so I cannot give you a solution.

If you want to do it in angular, you could use the following code. It provides APP_BASE_HREF token dynamically with a factory

export function baseHrefFactory()
{
  let expectedBaseHref = '/my/app';
  let currentBaseHref = window.location.pathname.substr(0, expectedBaseHref.length);
  //Add checks herre if needed
  return currentBaseHref;
}

@NgModule({
/**/
  providers: [
    {provide: APP_BASE_HREF, useFactory: baseHrefFactory}
  ]
})
export class AppModule
user_11607940

I loved @David's answer but I found my url ended up as /my/app/my/app when it was deployed and I have no idea why. I altered his approach to redirect the user to the correct base href if the href was the same but a different case:

export function baseHrefFactory(): string {
  const expectedBaseHref = '/my/app';
  const currentBaseHref = window.location.pathname.substr(0, expectedBaseHref.length);
  if (expectedBaseHref.toLowerCase() === currentBaseHref.toLowerCase() && expectedBaseHref !== currentBaseHref)
  {
    // The two base hrefs are the same, but not the same case.
    // Redirect the user to the correct base href.
    const newLocation = window.location.href.replace(currentBaseHref, expectedBaseHref);
    window.location.replace(newLocation);
  }

  // this is the case for localhost (where we don't use a virtual directory)
  return currentBaseHref;
}

@NgModule({
/**/
  providers: [
    {provide: APP_BASE_HREF, useFactory: baseHrefFactory}
  ]
})
export class AppModule
user_44406290
Related