How to pass query parameters with question mark from other web site to angular 6 spa

Question

I got 2 web applications A and B. The web Application B is the Angular 6 base.

In web application A, it got a link which is referring to B with query string like http://B/receipt?referencenumber=11111&title=test&description=sdfsd.

In web application B, I have define route like below.

{ path: 'receipt/:referencenumber/:title/:description', component: ReceiptComponent},
{ path: '', component: HomeComponent, pathMatch: 'full'},
{ path: 'home', component: HomeComponent},
{ path: 'error', component: ErrorComponent },
{ path: '**', component: ErrorComponent, data: { error: 404 } }

Issue:

if web application A, use the link http://B/receipt?referencenumber=11111&title=test&description=sdfsd, it would be redirected to 404 error page in web applicaiton B.

Anyone got Idea here? I have tried to modify the route in web application to { path: 'receipt/:referencenumber', component: ReceiptComponent}, and change the linke in web application A to http://B/receipt?referencenumber=11111, it still redirect to 404.

Moreover, I have tried route below with the optional query parameters, it is still not working. (Ref: Send data through routing paths in Angular) { path: 'receipt', component: ReceiptComponent}

Update

After I remove the error page, I found that the url is automatically encoded, it become http://B/receipt%3Freferencenumber%3D123123 not sure why also?

In your route, referenceNumber, title, and description are set up as path parameters, not query string parameters. Remove those bits from your path so it's just receipt — user184994
– user184994, Commented Sep 22, 2018 at 19:53
I have tried that, it is still redirect to the error 404 page — user2376512
– user2376512, Commented Sep 22, 2018 at 19:59
Seems to work in a StackBlitz? stackblitz.com/edit/… If possiblee, please feel free to fork that Stackblitz and reproduce the issue — user184994
– user184994, Commented Sep 22, 2018 at 20:06
After I remove the error page, I found that the url is automatically encoded, it become B/receipt%3Freferencenumber%3D123123 not sure why also? — user2376512
– user2376512, Commented Sep 22, 2018 at 20:49
How are you navigating to that page? If you just paste the correct URL into the address bar, does it work? — user184994
– user184994, Commented Sep 22, 2018 at 20:50

Shadoweb · Accepted Answer · 2020-07-28 17:10:57Z

10

You have mixed the url and queryParams

{ path: 'receipt/:referencenumber/:title/:description', component: ReceiptComponent},

would match the url like https://yoursite.com/receipt/dynamicNumber/dynamicTitle/dynamicDescription

to get this url http://B/receipt?referencenumber=11111&title=test&description=sdfsd on ReceiptComponent, just remove dynamic parts after receipt:

{ path: 'receipt', component: ReceiptComponent}

to get queryParams in component use this.route.queryParams via subscriber or this.route.snapshot.queryParams via direct property name

edited Jul 28, 2020 at 17:10

Shadoweb

6,3661 gold badge46 silver badges61 bronze badges

answered Sep 22, 2018 at 20:08

un.spike

5,1533 gold badges23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2376512 · Accepted Answer · 2018-09-22 23:17:22Z

2

Finally, find the issue. one of my Auth intercepter using navigate() cause the issue, it should use the navigateByUrl() instead.

answered Sep 22, 2018 at 23:17

user2376512

8851 gold badge11 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to pass query parameters with question mark from other web site to angular 6 spa

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related