Issue
I’m working with Paypal API that after confirming the purchase it redirects to the url you want, I put the url that I wish would be "localhost:4200/shop/order".
however whenever paypal returns the url, they add the token and payerid at the end url
"localhost:4200/shop/order?token=8YS089366D9655&PayerID=ASDVD4BLMH",
however when it comes back to my angular application, i have an error saying that the page cannot be found.
I have tried several ways to configure the route, but all attempts have failed.
idk if Angular dont accept "?" and "&" in route.
const shopRoutingConfig:Routes = [
{
path:'',component:ShopAppComponent,
children:[
{path:'purchase',component:PurchaseComponent},
{
path:'order/:token/:payerid', //fail in url returned from paypal
component:OrderComponent
}
]
}
]
@NgModule({
imports:[
RouterModule.forChild(shopRoutingConfig)
],
exports:[RouterModule],
})
export class ShopRoutingModule{}
my order component:
export class OrderComponent implements OnInit
{
constructor(private route:ActivatedRoute) {
}
ngOnInit(): void {
debugger
const routeParams = this.route.snapshot.paramMap;
var tokenText = routeParams.get('token')
var userId = routeParams.get('PayerID')
}
}
the only way that worked , is if i edit url manually to
"localhost:4200/shop/order/8DC695025P9917207"
Solution
"localhost:4200/shop/order?token=8YS089366D9655&PayerID=ASDVD4BLMH" token and PayerId is query params, but you have described your route as order/:token/:payerId, which is Route params.
so it would have been worked if redirection URL would be
"localhost:4200/shop/order/8YS089366D9655/ASDVD4BLMH".
Since redirection URL is returning with queryParams, it would be better to set your route as
path:'order/', component: yourComponent
and in component.ts
constructor() {
this.route.queryParams.subscribe(params => {
this.tokenText = params.token:
this.userId = params.payerId
})
}