Cannot read property 'style' of null

[MaklaCof]

First, I already try to find solution on SO, but I think this is a bug.

I am using Angular2 application. (For backend I use ASP.NET core 1.1.) I also create SignIn button following official tutorial.

On successfully log in I re-route user to home page and then I get error. I get the same error if I logout from google account (in chrome).

The error is:

vendor.js:81139 Uncaught TypeError: Cannot read property 'style' of null
at G_ (cb=gapi.loaded_1:91)
at H_. (cb=gapi.loaded_1:94)
at Function. (cb=gapi.loaded_0:155)
at run (vendor.js:99289)
at runIfPresent (vendor.js:99318)
at onGlobalMessage (vendor.js:99358)
at ZoneDelegate.invokeTask (vendor.js:81259)
at Zone.runTask (vendor.js:81135)
at ZoneTask.invoke (vendor.js:81329)

and line with error is:
window.document.getElementById((c?"not_signed_in":"connected")+a.El).style.display="none";
Of course getElementById returns null, because I am no longer on Login page, and Angular remove html from DOM. Same happens if I log out from Google account. The user could be anywhere.

I read somewhere on SO, where tip for same error was

don't delete Google SignIn element, just set diplay to none

, but this is not possible here, since Angular2 remove element from DOM.

I think you should check first if element exists and then set style to whatever.

[TMSCH]

Hi @MaklaCof,
Thanks for the detailed reporting. It's an error that you can safely ignore, however I understand it is not the ideal behavior. The widget is not meant to be removed from the page after a sign in or sign out, but many Single Page Apps will do that.

An alternative I would propose is to use this: https://developers.google.com/identity/sign-in/web/build-button#building_a_button_with_a_custom_graphic so you can control more precisely the lifecycle of the button. It will also help you automatically sign in the user if they were previously signed in:

auth2 = gapi.auth2.init({...}).then(auth => {
  if (auth.isSignedIn.get()) {
    // User already signed in, no need for the button, directly route to the "signed-in" state.
  }
});

Does that help?

[MaklaCof]

I will check it, but I can not ignore it. On successful login I do some work (some request are made to server, meni are reordered, some are hidden some are showed), but error in JavaScript stop executing this things.

[MaklaCof]

Unfortunately it is not working. It raise the same error.
This is my updated code:

    ngAfterViewInit()
    {
        gapi.load("auth2", () =>
        {
            const auth = gapi.auth2.init({
                client_id: "**********"
            });

            if (auth.isSignedIn.get())
            {
                this.onGoogleLoginSuccess(auth.currentUser.get());
            }
            else
            {
                auth.attachClickHandler(this.el.nativeElement, {}, (user) =>
                {
                    this.onGoogleLoginSuccess(user);
                },
                    (error) =>
                    {
                        this.onGoogleLoginError(error);
                    });
            }

            /*gapi.signin2.render(
                this.googleLoginButtonId,
                {
                    onsuccess: (user) => { this.onGoogleLoginSuccess(user); },
                    onfailure: (error) => { this.onGoogleLoginError(error); },
                    scope: this.scopes.join(" ")
                });*/
        });
    }

    onGoogleLoginSuccess(user: gapi.auth2.GoogleUser)
    {
        this.isGoogleAccountVisible = true;
        const profile = user.getBasicProfile();
        this.googleAccount = profile.getEmail();
        const auth = user.getAuthResponse(true);
        this.authService.loginWithGoogle(new GoogleLoginModel(auth.access_token, profile.getName()))
            .subscribe((profile) => { this.getData(); });
    }

    onGoogleLoginError(error: string)
    {
        this.error = { code: eResponseErrorCodes.Error, message: error };
    }

    loginClick()
    {
        this.isGoogleAccountVisible = true;
        this.authService.login(new LoginUser(this.loginForm.value.email, this.loginForm.value.password))
            .subscribe((profile) =>
            {
                this.getData();
            },
            (err) =>
            {
                this.isGoogleAccountVisible = false;
                this.error = err;
            });
    }

    private async getData()
    {
        delete this.error;
        await this.usersService.readAndSave();
        this.isGoogleAccountVisible = false;
        delete this.googleAccount;
        this.router.navigate([""]);
    }

If I return to original problem:

The widget is not meant to be removed from the page after a sign in or sign out, but many Single Page Apps will do that.

I think you should really fix this. It is a little funny that Google (Angular2) is not working with himself (SignIn). It is not that hard to change this code:
window.document.getElementById((c?"not_signed_in":"connected")+a.El).style.display="none";
to this:

var t = window.document.getElementById((c?"not_signed_in":"connected")+a.El);
if (t) t.style.display="none";

[TMSCH]

Hi @MaklaCof,
Thanks for trying to implement what I recommended.

Are you saying this is still raising the same Uncaught TypeError: Cannot read property 'style' of null? I'm surprised as the method used now should not depend at all the same library gapi.signin2. Have you removed the HTML for the previous button? If there is still a button with the same class g-signin2 it will initialize as before.

I also see that we could avoid this error raised very easily, however, that does not fix the real issue here, being that the button/library state is not properly cleaned up by removing the button from the DOM. A more programmatic approach should be used within Angular framework instead of using the button widget.

Could you please make sure that gapi.signin2 is not initialized somehow in your code? On my end I will look at how properly fix the issue within the library itself.
Thanks!

[MaklaCof]

Hi. Thank you.
I tried again and it works. I must have forget something in previous try. Not sure what.

[TMSCH]

Glad it worked!

[JordiOrriols]

I'm getting the same error on ReactJs.

The first time the page is loaded everything is Ok.
If I change from one page to another, the element is removed from the Dom, and when I go to the page with the button, gapi.signin2.render is called again.

But it seems that the events from the first call still alive, and that events show the error of "null".
If I repeat the process, the events still there, but this time twice.

It feels that what we're missing is a function to clean all events when the DOM is removed.

[TMSCH]

Hi @JordiOrriols, as I mentioned earlier, gapi,signin2 is unfortunately not designed to be used in a single page application, hence the issue you observe. For now, you can build a custom button which will help you control the lifecycle more precisely: https://developers.google.com/identity/sign-in/web/build-button#building_a_button_with_a_custom_graphic.

We could potentially implement a dispose() method that would dispose properly of all the listeners, method that you would call when the button is removed from DOM. Would that help?

[JordiOrriols]

This would help for sure. It would be great to have this method on the future!
Thank you!

[tom10271]

If you search gapi Cannot read property 'style' of null in Google search, you will see how much pain we are suffering. Yes we can implement it ourself to fix the issue but it would be much better if Google can make it works with SPA

[TMSCH]

@tom10271 I apologize for the inconvenience. We are going to roll out a quick temporary fix while we work on a longer term solution for Single Page Application. I'll update this thread when it's deployed.