I'm currently working on implementing a Google Sign-in feature in an Angular application, but I'm encountering the following error:
Cannot read property 'load' of undefined
This was actually working perfectly just an hour ago, but now it seems to be experiencing a loading issue. I suspect that something is out of sync somewhere, but I'm unsure how to resolve it.
For clarification, my app doesn't load directly onto the login page from the start; instead, I navigate to it using the address bar in Chrome (not sure if this could be causing the problem). The client ID is correct, I've just replaced it for security purposes in this question.
login.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
public auth2: any;
user: string;
gapi: any;
public googleInit() {
this.gapi.load('auth2', () => {
this.auth2 = this.gapi.auth2.init({
client_id: 'client_id.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
scope: 'profile email'
});
this.attachSignin(document.getElementById('googleBtn'));
});
}
public attachSignin(element) {
this.auth2.attachClickHandler(element, {},
(googleUser) => {
let profile = googleUser.getBasicProfile();
console.log('Token || ' + googleUser.getAuthResponse().id_token);
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
//YOUR CODE HERE
this.user = "";
}, (error) => {
alert(JSON.stringify(error, undefined, 2));
});
}
ngAfterViewInit(){
this.googleInit();
}
ngOnInit() {
}
}
login.component.html
<div id="googleBtn">Login w/ Google</div>