Mohamed Fathy Mohamed Fathy - 4 years ago 259
TypeScript Question

angular 2 Routes 3.0, case sensitive

const routes: Routes = [
{ path: 'x', component: xComponent },
{ path: 'y', component: yComponent },
{ path: 'zComponent', component: zComponent }
];


If I write in the url x small it will direct me to the component page, if I write X Capital it will say not valid url.

How to make the url insensitive Case

Answer Source

Two options .. 1. create 1 URLSerializer Class

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

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
        return super.parse(url.toLowerCase());
    }
}

And in your app.module.ts

providers: [
        {
            provide: UrlSerializer,
            useClass: LowerCaseUrlSerializer
        }
    ],

Option 2: Simple workaround in your route file.

{ path: '/home', redirectTo: ['/Home'] },
{ path: '/Home', component: HomeComponent, name: 'Home' },
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download