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, Sep 22 '18 at 19:53
I have tried that, it is still redirect to the error 404 page — user2376512, Sep 22 '18 at 19:59
Seems to work in a StackBlitz? https://stackblitz.com/edit/angular-nafraa?file=src%2Fapp%2Fapp.component.ts If possiblee, please feel free to fork that Stackblitz and reproduce the issue — user184994, Sep 22 '18 at 20:06
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? — user2376512, Sep 22 '18 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, Sep 22 '18 at 20:50
navigating is only working in the web applicaiton B, if the web application A referring the url, it would not be working. — user2376512, Sep 22 '18 at 20:59
But how are you going from A to B? What code are you using to do that? It should work fine. If I create a hyperlink like https://angular-nafraa.stackblitz.io/receipt?referencenumber=999 it seems to work fine — user184994, Sep 22 '18 at 21:04

score 10 · Accepted Answer · edited Jul 28 '20 at 17: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

score 2 · Answer 2 · answered Sep 22 '18 at 23:17

2

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

answered Sep 22 '18 at 23:17

user2376512

885
1
10
21

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

2 Answers2