Angular2: Make route paths case insensitive

by

Here’s what I did.

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

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
        // Optional Step: Do some stuff with the url if needed.

        // If you lower it in the optional step 
        // you don't need to use "toLowerCase" 
        // when you pass it down to the next function
        return super.parse(url.toLowerCase()); 
    }
}

And

@NgModule({
    imports: [
      ...
    ],
    declarations: [AppComponent],
    providers: [
        {
            provide: UrlSerializer,
            useClass: LowerCaseUrlSerializer
        }
    ],
    bootstrap: [AppComponent]
})

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. How to detect a route change in Angular?
  3. Angular 2: 404 error occur when I refresh through the browser [duplicate]
  4. How do I create a singleton service in Angular 2?
  5. How to go back last page
  6. Warn user of unsaved changes before leaving page
  7. ‘router-outlet’ is not a known element
  8. Passing data into “router-outlet” child components
  9. Angular 2 unit testing components with routerLink
  10. How to pass query parameters with a routerLink
  11. How can I conditionally disable the routerLink attribute?
  12. Dynamic routing based on external data
  13. How to switch layouts in Angular2
  14. How do I detect user navigating back in Angular2?
  15. Using Resolve In Angular2 Routes
  16. Angular2 – Interaction between components using a service
  17. Is Angular 2’s Router broken when using HTML5 routes? [duplicate]
  18. Angular2 router.navigate refresh page
  19. Angular 2 router resolve with Observable
  20. Can’t reload/refresh active route
  21. Lazy Loading BrowserModule has already been loaded
  22. Redirect to a different component inside @CanActivate in Angular2
  23. Pass parameter into route guard
  24. Angular 2 – Routing – CanActivate work with Observable
  25. Want to prevent Component recreation while routing in Angular 2
  26. New Angular2 router configuration
  27. Angular routerLink does not navigate to the corresponding component
  28. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  29. Angular2 Routing – keeping state of component when route changes [duplicate]
  30. Angular 2 different components with same route

Leave a Comment