Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Navigation Blocking HTML Rendering When `navigateByUrl` is Used, But Allows Typescript Code to Run

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({
          next:(data: 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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you to everyone who provided suggestions. I decided to take a different approach that offers users a better UI experience. Instead of placing the reroute logic in the ngOnInit method, I added a button that users can click to trigger the reroute. This way, users have the opportunity to view the page's content and choose to navigate away at their convenience.

    @ruben and @naren provided excellent tips though, be sure to try them if you have the same issue!


  2. 0

    You might have SSR enabled, this might be causing the HTML to load later than expected.

    Wrap the entire logic in a isPlatformBrowser function, so that the code executes only on the browser.

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

@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,
    @Inject(PLATFORM_ID) private platformId: Object,
  ) {}

  ngOnInit(): void {
    if(isPlatformBrowser(this.platformId)) {
        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({
              next:(data: 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'); 
          }
      
    
        });
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search