Angular url case insensitive

Question

I'm new to angular. I have a question. localhost:4200/product working but localhost:4200/Product not working. I try;

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
            }
        ],

but make all the letters small. I want to all the links to work.

/product

/Product

/PRODUCT

/pRoDucT

......

app.module.ts

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: [],

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Title';
}

I hope you understand. Sorry for my bad english.

Possible duplicate of Angular2: Make route paths case insensitive — Jota.Toledo
– Jota.Toledo, Commented Feb 21, 2018 at 11:58

Ayman El Temsahi · Accepted Answer · 2018-02-21 11:57:30Z

2

you should add this provide statement ,

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

to the app.module.ts file. you have the providers empty in the app module.

answered Feb 21, 2018 at 11:57

Ayman El Temsahi

2,6102 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tom clack Over a year ago

the code works but I do not want all the letters to be small.

Faisal Over a year ago

will this also Serialize the query parameters?

maxisam Over a year ago

this will change the token in query string

Collectives™ on Stack Overflow

Angular url case insensitive

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related