Click here to Skip to main content
15,561,817 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
I'm new to angular. I have a question. localhost:4200/product working but localhost:4200/Product not working.

What I have tried:

I try 
<pre>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: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


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.
Posted
Updated 29-Nov-18 8:11am

You're on the right track. The steps to making your Url routes insensitive are as follows:

1) Create a UrlSerializer that derives from the DefaultUrlSerializer (you did that).
JavaScript
import { DefaultUrlSerializer, UrlTree } from '@angular/router';

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

2) import your new UrlSerializer in your app.module.ts file (your path will be different):
JavaScript
import { LowerCaseUrlSerializer } from './common/providers/others/lowerCaseSerializer/lowerCaseSerializer';

3) Register the new UrlSerializer with your module providers in the app.module.ts file:
JavaScript
providers: [
  {
    provide: UrlSerializer,
    useClass: LowerCaseUrlSerializer
  }]

None of this hard. I'm just surprised that they don't add a conditional to the DefaultUrlSerializer that will allow you indicate case insensitive. Everywhere else on the Internet Urls are insensitive.
 
Share this answer
 
Hi there,

The routes in Angular are case sensitive. In the routeconfig, you have specified the url path as "product".
If you still wanna support both the case , add a new route in the route config as follows:

{
path: 'Product',
component: ProductComponent
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900