title: Angular url case insensitive
body: <p>I'm new to angular. I have a question. localhost:4200/product working but localhost:4200/Product not working. I try;</p>
  
  <pre><code>import { DefaultUrlSerializer, UrlTree } from '@angular/router';
  
      export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
          parse(url: string): UrlTree {
          return super.parse(url.toLowerCase()); 
          }
      }
      .
  
      .
  
      .
  
  
        providers: [
              {
                  provide: UrlSerializer,
                  useClass: LowerCaseUrlSerializer
              }
          ],
  </code></pre>
  
  <p>but make all the letters small. I want to all the links to work. </p>
  
  <p>/product</p>
  
  <p>/Product</p>
  
  <p>/PRODUCT</p>
  
  <p>/pRoDucT</p>
  
  <p>......</p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule, Route } from '@angular/router';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { AppComponent } from './app.component';
  import { ProductComponent } from './product/product.component';
  import { HomeComponent } from './home/home.component';
  
  const routeConfig: Route[] = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'product',
    component:  ProductComponent
  }
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      ProductComponent,
      HomeComponent
  ],
    imports: [
      BrowserModule, FormsModule, RouterModule.forRoot(routeConfig)
    ],
    providers: [],
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Title';
  }
  </code></pre>
  
  <p>I hope you understand. Sorry for my bad english.</p>