Scironic Scironic - 1 year ago 965
Javascript Question

google sign-in with angular2 and typescript - where to get gapi?

I'm trying to use google sign-in with angular2 by following this question: Google Sign-In for Websites and Angular 2 using Typescript

But I'm getting an error:

ORIGINAL EXCEPTION: ReferenceError: gapi is not defined
ReferenceError: gapi is not defined
at LoginAppComponent.ngAfterViewInit (http://localhost:3000/app/login.component.js:33:9)
at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:46:68)
at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12143:18)
at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12247:48)
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12169:23)
at DebugAppView.AppView.detectChangesInternal (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12154:18)
at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12143:18)
at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12247:48)
at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:10397:69)
at eval (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9911:88)

Evidently gapi isn't defined - which I can understand as I seem to only be declaring an empty var.

My current code is as below:

import {Component, NgZone} from "@angular/core";

declare var gapi: any;

selector: "login",
templateUrl: "templates/login-template.html"
export class LoginAppComponent {
googleLoginButtonId = "google-login-button";
userAuthToken = null;
userDisplayName = "empty";

constructor(private _zone: NgZone) {

// Angular hook that allows for interaction with elements inserted by the
// rendering of a view.
ngAfterViewInit() {
// Converts the Google login button stub to an actual button.
"onSuccess": this.onGoogleLoginSuccess,
"scope": "profile",
"theme": "dark"

// Triggered after a user successfully logs in using the Google external
// login provider.
onGoogleLoginSuccess = (loggedInUser) => { => {
this.userAuthToken = loggedInUser.getAuthResponse().id_token;
this.userDisplayName = loggedInUser.getBasicProfile().getName();

The template loads fine, it is just the

So my question is: what am I missing? How do I need to be defining
for it to work?

Here is my main app.component code:

import { Component } from '@angular/core';
import { LoginAppComponent } from './login.component'

selector: 'my-app',
template: `<script src="" async defer></script>
window.onLoadCallback = function(){
client_id: ''
<h1>Angular2 P.O.C.</h1>
directives: [LoginAppComponent]
export class AppComponent { }

Answer Source

Have you included the Google platform API script?

<script src=""></script>

See this question for instructions on how to wait for the GAPI script to load before executing your code.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download