google signin works on first load

I am trying to impliment google sign in functionality in my angular project. In my index.html file I've added <script src="https://accounts.google.com/gsi/client" async defer></script>. Here is my SignupComponent.html

<div class="auth_buttons" id="google_login" #loginRef>
            <img src="./assets/images/icon/gmail.svg" />
            <span> Continue with Gmail</span>
        </div>

And this is my signup.ts file

 auth2: any;
    @ViewChild('loginRef', { static: true }) loginElement!: ElementRef;

  ngOnInit(): void {   
    this.googleAuthSDK();
  }
  callLogin() {
    this.auth2.attachClickHandler(this.loginElement.nativeElement, {},    
      (googleAuthUser: any) => {
        let profile = googleAuthUser.getBasicProfile();
        this.zone.run(() => {
         //here I call my api service.
        });
      }, (error: any) => {
        // alert(JSON.stringify(error, undefined, 2));
      });

  }

  googleAuthSDK() {
    (<any>window)['googleSDKLoaded'] = () => {  
      (<any>window)['gapi'].load('auth2', () => {      
        this.auth2 = (<any>window)['gapi'].auth2.init({  
          client_id: 'XXXXXX',
          plugin_name: 'login',
          cookiepolicy: 'single_host_origin',
          scope: 'profile email'
        });
        this.callLogin();
      });
    }
 
     (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement('script');
      js.id = id;
      js.src = "https://apis.google.com/js/platform.js?onload=googleSDKLoaded";
      fjs?.parentNode?.insertBefore(js, fjs);
    }(document, 'script', 'google-jssdk')); 
  }

Everything works fine for the first load,but if I go to another page and then return to signup component it stops working. only thing that helps is page load or f5.What am i missing?