Cannot read property 'style' of null

[Wylianne]

The example works fine, but if I use router.navegation the page generated this error.

Uncaught TypeError: Cannot read property 'style' of null at G_ (cb=gapi.loaded1:70) at H. (cb=gapi.loaded_1:73) at Function. (cb=gapi.loaded_0:191) at MessagePort.c.port1.onmessage (cb=gapi.loaded_0:111)

[tom10271]

I have the same issue too.

The flow is: Sign in with Google Redirect to Main page Wait for seconds Logout in Main Page, It should go back to login page Then error throws

[tom10271]

https://github.com/google/google-api-javascript-client/issues/281

[miltador]

Hi! I will look into it this weekend, bare with me!

[gusarov]

In my case problem appears during navigation through tabs. And apparently element ID is not there after ngAfterViewInit indeed. So, I just added waiting for the button to appear, like this:

    var btn = document.getElementById(btnId);
    if (!btn) {
        console.log('sso', 'wait for button started');
        var waitForRes;
        var waitFor = new Promise((res, rej) => {
            waitForRes = res;
        });
        this.ngZone.runOutsideAngular(()=>{
            var timer = setInterval(() => {
                btn = document.getElementById(btnId);
                console.log('sso', 'wait for button...', btn);
                if (btn != null) {
                    clearInterval(timer);
                    this.ngZone.run(() => {
                        waitForRes();
                    });
                }
            }, 100);
        });
        await waitFor;
        console.log('sso', 'button is there!', btn);
    }

    console.log('sso', 'renderGoogle Loaded');
    gapi.signin2.render(btnId, { ...

So, there is nothing bad with gapi I believe... except that it was advised to use ngAfterViewInit for render call. But during SPA navigation with a router, switching components back and forth the target element ID that we supposed to path to Render call is actually not ready.