Angular Navigation Blocking HTML Rendering When `navigateByUrl` is Used, But Allows Typescript...

I'm working with Angular and I'm having an issue where my page succesfullPayment doesn't load HTML document, but allows the typescript of the component to run. Let's start with my component ts:

import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';


@Component({
selector: 'app-succesfull-payment',
standalone: true,
imports: [FormsModule, CommonModule],
templateUrl: './succesfull-payment.component.html',
styleUrl: './succesfull-payment.component.css'
})
export class SuccesfullPaymentComponent implements OnInit{

token! : any;
payerId!: any;
orderId!: any;

constructor(private route: ActivatedRoute, private router: Router, private http:
HttpClient) {}

ngOnInit(): void {

console.log("successfully paym,ent page loaded!!!!");

this.route.queryParams.subscribe(params => {
this.token = params['token'];
this.payerId = params['payerId'];
this.orderId = params['orderId'];

console.log(`paymentId aka token: ${this.token}`);
console.log(`orderId: ${this.orderId}`);

if(this.token && this.orderId){
console.log(`paymentId aka token: ${this.token}`);
console.log(`orderId: ${this.orderId}`);
console.log('about to send capture payment request');
this.http.post(`http://localhost:3000/capturePayment`, {token: this.token, orderId: this.orderId})
.subscribe({
nextdata: any)=>{
if (data.success){
console.log(` ${data.message}`);

this.router.navigateByUrl('/dashboard'); //this line prevents successfull-payment from rendering its html doc

} else{
alert(data.message);
}
},error : (error: any) =>{
console.error('error: ', error);
}
});
console.log('sent capture payment request successfully');
}


});}}


What the issue most likely is: I think what is happening is that the this.router.navigateByUrl('/dashboard'); is trigerring before the current html doc is fully loaded, causing angular to trigger another reroute before current one is fully through, to overcome this I have attempted the following:

1- Setting a setTimeout function: I have attempted giving the successfullpayment component 30 seconds before trigerring the reroute to allow enough time for html to load and for user to read the page components, however that did not work.

2- Setting an isLoaded variable and making it an observable so that the redirect line will only trigger if isLoaded is switched to true, but the same issue still occurred.

Important Notes

1- Both of the attempted solutions above worked fine when I commented out the this.router.navigateByUrl('/dashboard'); so I am really not sure why this particular line is giving angular so much trouble!

2- Although the html doc is not loaded, the typescript code is executed, and it has the desired effect in the backend. The problem is that it gives an error on the front end and does not even allow for redirection to '/dashboard'

Questions

1- Why does the page rendering break when I trigger the router navigation after completing the HTTP request?

2- How can I ensure that the page renders properly before navigating away?

Any help would be greatly appreciated!

Continue reading...