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

Answer 3

You can specify several routes for one component/module. One route will with this parameter and the second one - without.

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

Or you can pass them via query string, like here How to get query params from url in Angular 2? in this case you do not need to specify them in your routes config

Answer 4

No need to create multiple routes.

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

You can create one method like this

goToPage() { this.router.navigate(['/product-list'], { queryParams: {searchParms?.schkey},{ searchParms?.lat}, {searchParms?.lng} , { searchParms?.name}, { searchParms?.filter} }); }

You can create one object in your ts file call searchParms with fields and use it.

And create route like const routes Routes = [ { path: '', component: SearchpagesComponent , children: [ { path: 'search', loadChildren: './search/search.module#SearchModule', // here schkey is optinal just required blank slashes } ] } ];

Answer 5

Instead of specifying '' for :schkey in <a [routerLink]="['/search/',nondefinedvariable,'37.7749295','-122.41941550000001','San-Francisco','All']" > Goto Search Page </a> you can specify a variable name that is not defined in the component so when the url forms it will look like http://..../search/undefined/37.... which will forward you to the same page even if you refresh it, But you will need to check in the SearchComponent for the schkey value that it should not be equals to 'undefined' if you are using for any functionality, Its a hack, but can fulfils the case