How to pass optional Router Parameter with preserved URL in Angular5

Question

I have some specific requirement in that have to work with Existing URL. Existing URL's are already well indexed and used for promotions and many campaigns so no chance to modify it.

Existing URLs is like - www.xyz.com/search//65.5445/-122.56454/Listing-name/All

While In Angular defining URL like

const routes: Routes = [
  { path: '', component: SearchpagesComponent ,
    children: [
      {
        path: 'search/:schkey/:lat/:lng/:name/:filter', loadChildren: './search/search.module#SearchModule',
        // here schkey is optinal just required blank slashes 
      }
    ]
  }
];

and in Router link

<a [routerLink]="['/search/','','37.7749295','-122.41941550000001','San-Francisco','All']" > Goto Search Page </a>

Current : Above code is working, If I click on Routerlink defined anchor. its redirecting and component being loaded, but on refreshing the page component is not loading and redirecting to root URL.

Expected:www.xyz.com/search//37.7749295/-122.41941550000001/San-Francisco/ on direct link or refreshing page component should be loaded. And double slashes search// should be preserved.

For Reproducing - https://stackblitz.com/edit/angular-routing-child-routes-6ydor6

Github Issue - https://github.com/angular/angular/issues/32853

Answer 1

The reason is because :schkey is left empty.

You can define multiple routes with and without certain parameters.

{
    path: 'search/:schkey/:lat/:lng/:name/:filter',
    component: SearchpageComponent
},
{
    path: 'search/:lat/:lng/:name/:filter',
    component: SearchpageComponent
}

Basically, instead of:

http://.../search//37.7749295/-122.41941550000001/San-Francisco/All

your URL would be:

http://.../search/37.7749295/-122.41941550000001/San-Francisco/All

Answer 2

If you have no problem for url rewrite when hard refresh, this solution works as expected. example here

i used this in main.ts before bootstraping the app.

 const __stripTrailingSlash = (Location as any).stripTrailingSlash;
(Location as any).stripTrailingSlash = function _stripTrailingSlash(url: string): string {
  if(url.indexOf('//') > -1){
    url = url.replace('//','/');
    return url;
  }
  return /[^\/]\/$/.test(url) ? url : __stripTrailingSlash(url);
}

idea from github issue https://github.com/angular/angular/issues/16051