Typescript control flow behavior

I am new to JS, TS and Angular…
So I have this angular component:

export class AdminProductsMenuComponent implements OnInit{
    constructor(private productService: ProductService,
                private alertService: AlertService,
                private router: Router) {
                    this.subscribeToDeleteProductEvents();
    }

    productsAdminModel: IGetProductAdminModel[] = [];
    private productId: string;

    ngOnInit(): void {
        this.executeGetAllProductsAsAdmin();
    }

    executeGetAllProductsAsAdmin() {
        this.productService.getAllProductsAsAdmin().subscribe({
            next: (productData) => this.productsAdminModel = productData
        })
    }

    private subscribeToDeleteProductEvents() {
        this.alertService.getSubjectAlertEvent().subscribe({
            next: (isConfirmed) => {

                if (isConfirmed) {
                    this.productService.deleteProduct(this.productId).subscribe({
                        next: () => {
                            this.reloadCurrentResources();
                        }
                    });
                }
            }
        });
    }

    private reloadCurrentResources(): void {
        // save current route first
    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
        this.router.navigate(['/AdminProducts']); // navigate to same route
    }); 
    }

    executeProductDelete(id: string) {
        this.productId = id;
        this.alertService.confirmationAlertProductDelete();
    }
    
}

Brief explanation:
I have subscription in the constructor which listens for events during the lifetime of the component.

An event is fired when the last method is called (through the template) which prompts a SweetAlert confirm dialog. Depending on the selected the event is true or false.

Now here is the tricky part – if I move the executeProductDelete() method above reloadCurrentResources() and subscribeToDeleteProductEvents() and invoke it (executeProductDelete) it will complete the action and throw error
enter image description here

I have a feeling that it executes again the subscribeToDeleteProductEvents() and reloadCurrentResources() .

If I move the executeDeleteProduct() as the last method, no error occurs.
Why is this behavior? I have a feeling that they continue to run synchronously. They are not invoked anywhere else.