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

@phat.huynh _ underscore will not work, as all pages indexed. and promotional links active — Ajarudin Gunga, Sep 23 '19 at 09:58
@PhatHuynh https://stackblitz.com/edit/angular-routing-child-routes-6ydor6 — Ajarudin Gunga, Sep 27 '19 at 07:13
@PhatHuynh If not having such requirement definitely going with that — Ajarudin Gunga, Sep 27 '19 at 07:33
Can't you just use your webserver to do 301 redirections? e.g. redirect `/search//x/y/z` to `/search/dummy/x/y/z`? — David, Sep 30 '19 at 07:32

score 3 · Answer 1 · answered Oct 01 '19 at 12:56

3

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

answered Oct 01 '19 at 12:56

Hulkstance

1,323
9
15

hi @Electron , this is not requirement I know that can be achieve by skipping , but have specific requirement to preserve slashes. – Ajarudin Gunga Oct 01 '19 at 17:55
I don't think it is possible for now. https://github.com/angular/angular/issues/3957#issuecomment-208345337. Even tho, the report is very old. A possible solution could be to intercept the navigation and if the argument is null, replace it with some 'default' value but I don't think it's worth it. – Hulkstance Oct 01 '19 at 19:15

score 2 · Answer 2 · answered Oct 01 '19 at 19:55

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

Your solution is absolutely correct and can be work. but what issue happens with this, without slashes google crawler will consider it as a new page and all generated indexes till date will be losen. This is one risk factor here. — Ajarudin Gunga, Oct 02 '19 at 05:09

score 0 · Answer 3 · answered Sep 23 '19 at 10:06

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

KEVAL PANCHAL · Answer 4 · 2019-10-01T18:14:26.530

0

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

edited Oct 01 '19 at 18:14

answered Oct 01 '19 at 15:25

KEVAL PANCHAL

535
3
14

There is no problem with routerLink on page refresh it's not working – Ajarudin Gunga Oct 01 '19 at 17:55
That may be caused because of routes issues that is not match with route which you create. If you pass parms in queryParms then it will not break. – KEVAL PANCHAL Oct 01 '19 at 18:15
And on your results page you need to het that parms and get your data from backend – KEVAL PANCHAL Oct 01 '19 at 18:16
You create that route with mandatory parameter and if you refresh your page. At that time some parms are missing in your route so it will break. – KEVAL PANCHAL Oct 01 '19 at 18:18
Yes exactly, route is breaking. – Ajarudin Gunga Nov 25 '19 at 08:52

score 0 · Answer 5 · answered Oct 03 '19 at 12:42

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

This is not the question. the only requirement is if I paste URL in browser www.xyz.com/search//65.5445/-122.56454/Listing-name/All component should load which is not working, the route is braking after double slashes. — Ajarudin Gunga, Oct 03 '19 at 13:38

How to pass optional Router Parameter with preserved URL in Angular5

5 Answers5