base href is case sensitive in Angular 2

Question

I have set the base ref like this for an Angular 2 app

If I go to localhost/MyApp everything works correctly.

Answer 1

You will have to write code to override base href.

Possible locations you can override is 1. Angular2: Make route paths case insensitive

2. You write your own location strategy & Ignore case sensitivity there. And in your app.module.ts, you tell ur Angular 2 app to use custom location strategy in your providers section.

   {provide:LocationStrategy,useClass:CustomPlatformLocation},

Answer 2

using <base href="./"> instead of <base href="MyApp"/> (implicit) solved the problem for me. the virtual directory now is case insensitive.

Answer 3

I added typed base href as a route in router config with redirectTo property set to default route of the app, which is in my case is 'login', so any combination of base href will work. This is more sort of a hack.

I wrote that code in the app.component.ts file.

ngOnInit() {
   var baseHref  = window.location.pathname.split('/')[1];
   if(baseHref != "" && baseHref != "login")
      this.router.config.Add({path:baseHref,redirectTo:'/login',pathMatch:'full'});
}

Note:- As suggested by other answers, LowerCaseUrlSerializer didn't work for me as it requires all routes specified in my app to be in lower case only.

Answer 4

I tried Parth way, but I couldn't find a way to fix my problem with the LocationStrategy approach.

Based on some ideas from this question and ended up with something like this:

import { DefaultUrlSerializer, UrlTree } from "@angular/router";

export class LowercaseUrlSerializer extends DefaultUrlSerializer {

    parse(url: string): UrlTree {

        let urlUpperBaseUrl = url;

        if (url.startsWith("/app")) {
            urlUpperBaseUrl = "/APP" + url.slice(4);
        }
        if (url.startsWith("app")) {
            urlUpperBaseUrl = "APP" + url.slice(3);
        }

        return super.parse(urlUpperBaseUrl);
    }

}

You have to configure the injector as well:

@NgModule({
    ...
    providers: [
        ...
        { provide: UrlSerializer, useClass: LowercaseUrlSerializer },
    ],
    ...
})
export class AppModule {
}

I hope it hepls!