Angular2 Google sign

Question

Hi I'm trying Angular2 with Type Script to add a login/logout to/from google by their guide

In Index.html

 <script src="https://apis.google.com/js/platform.js"></script>

In LoginComponent.ts

declare const gapi: any;

ngAfterViewInit() {
  gapi.signin2.render(
  this.googleLoginButtonId,
  {"onSuccess": this.onGoogleLoginSuccess,"scope": "profile",
    "theme": "dark"},function (error) {
   console.log(JSON.stringify(error, undefined, 2));
  });

}

      onGoogleLoginSuccess = (loggedInUser) => {
var profile = loggedInUser.getBasicProfile();
       this.auth.LoginSuccess(loggedInUser);
      }

Thats works fine for me but when loginSuccess i want to route the view to profile page on that time i am facing the error like:

Uncaught TypeError: Cannot read property 'style' of null
    at G_ (cb=gapi.loaded_0:282)
    at H_.<anonymous> (cb=gapi.loaded_0:285)
    at Function.<anonymous> (cb=gapi.loaded_0:155)
    at MessagePort.c.port1.onmessage (cb=gapi.loaded_0:73)

And Also i want the whole login process As Service Or Module to reuse. How Can I create This Whole Google Login Operations As Module or service

Can U give me a code snippet or working demos or suggest me any angular2 module to achieve this.

I also Tried angular2SocialLogin Module But That Also shows error when the production i got error some think I mention in git issue

Please Help Me Out of it .Thanks in advance..

Answer 1

The error can be fixed by hiding the login button once login is successful.

 <div id="g-signin2" style="display: none;"></div>

Refer this answer

Also I followed this plunkr example and worked fine with me