CODEWITHSUNDEEP
angularangular5angular6
Jitendra
Jitendra

Reputation: 253

In Angular 6 how make case insensitive url pattern?

In my case I want to support same url in case insensitive manner.

Example: it should support all url

localhost:1029/documentation
localhost:1029/DOCUMENTATION
localhost:1029/DOCUMENTAtion
localhost:1029/docuMENTATION

Upvotes: 25

Views: 20240

Answers (5)

mittal bhatt
mittal bhatt

Reputation: 1009

You should add this provide statement to the app.module.ts

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

Upvotes: 34

BondAddict
BondAddict

Reputation: 790

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

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    override parse(url: string): UrlTree {
        var urlArray = url.split('/');
        urlArray[urlArray.length - 1] = pascalize(urlArray[urlArray.length - 1]);

        var newUrl = urlArray.join('/');
        return super.parse(newUrl);
    }
}

I did this because my routes are PascalCased. As long as you have predictable url where your route name is easily found, this strategy would work.

This will take

http://localhost:4200/#/someId/someRoute and make it http://localhost:4200/#/someId/SomeRoute

Upvotes: 0

ankhansen
ankhansen

Reputation: 933

Inspired by this thread, the following variant is supposed to lower-case only the UrlSegments in the URL part - and leave the query params alone.

The idea is to let DefaultUrlSerializer parse the URL to an UrlTree - and then go through the UrlTree and lowercase segments.

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
        const urlTree = super.parse(url);

        this.lowerCaseSegments(urlTree.root);

        return urlTree;
    }
    private lowerCaseSegments(urlSegmentGroup: UrlSegmentGroup) {
        if (urlSegmentGroup.hasChildren()) {
            Object.entries(urlSegmentGroup.children).forEach(
                ([key, value]) => this.lowerCaseSegments(value)
            );
        }

        urlSegmentGroup.segments.forEach((segment) => segment.path = segment.path.toLowerCase());
    }
}

Upvotes: 3

Ganesh
Ganesh

Reputation: 312

This will work, configure the route to NotFoundComponent with wild character like below

{path:'**',component:NotFoundComponent}

then, in the NotFoundComponent.ts file, add the below lines inside ngOnInit()

if(this.route.snapshot.url[0].path.toLowerCase()!==this.route.snapshot.url[0].path)
      this.router.navigate([this.route.snapshot.url[0].path.toLowerCase()]);

You have to import ActivatedRoute,Router from '@angular/router' and inject in constructor like below

constructor(private route:ActivatedRoute,
    private router:Router) { }

Here if condition in ngOnInit() makes sure that it won't route or navigate infinitely

Upvotes: 1

foram kantaria
foram kantaria

Reputation: 786

You need a UrlSerializer as follow:

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


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

And then added it as a provider in the app.module.ts

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

Upvotes: 3

Related Questions