[Fixed] Read route params Angular

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
  })
}

Leave a Reply

(*) Required, Your email will not be published