Load Angular 5 component after gapi has been loaded

Question

I am writting an angular 5 app using the CLI. I am using gapi to retrieve user data in order to populate a form.

The client script is included in the index.html file :

<head>
  <meta charset="utf-8">
  <script src="https://apis.google.com/js/client.js"></script>
  ...
</head>

Here is my component with the call :

userProfileModel: UserProfileModel = new UserProfileModel();

ngOnInit() {
  this.form = this.toFormGroup();
  this.onFormChanges();

  this.userService
      .getUserById(this.userId)
      .then(usr => {
        this.mapModel(usr.result['profile']);
      })
      .then(() => {
        this.form.patchValue(this.userProfileModel);
      });
}

And the userService's method :

declare var gapi: any;

export class UserService {

  getUserById(id: number) {
    return gapi.client.request({
      method: 'GET',
      'path': this.constants['endpoint_user_getbyid'] + '/' + id,
      'root': this.constants['api_url']
    });
  }
  ...
}

Problem is, gapi seems to do not be initialized right after my component has finished loading : I have to set a >500ms timeout to be able to use it, and it's ugly.

This code gives me the following error :

ERROR TypeError: Cannot read property 'request' of undefined

Please not :

1- I haven't installed anything with npm / yarn, I am simply using the script with the gapi var declaration.
2 - after every build, the code works without any error and populates my form the first time the page is loaded, then after one refresh, it fails everytime.

How can I tell angular to load client.js at startup before all the components ?

Thanks !

may be this will help you https://stackoverflow.com/questions/35655361/angular2-how-to-load-data-before-rendering-the-component — A_D, Jun 06 '18 at 13:44
Sorry for the late answer, thanks you so much it worked ! I answered my own question and described the detailed solution. — Hugo Beisser, Jun 11 '18 at 10:20

score 3 · Accepted Answer · answered Jun 11 '18 at 10:19

Thanks to @ADarnal I finally found a solution by reading this topic :

How to pass parameters rendered from backend to angular2 bootstrap method

I followed the same exact process described in computeiro's answer.
My equivalent of the "BackendRequestClass" class is a GapiService.

In this Gapi service, the load method allows me to load gapi before any other call is executed :

/* GapiService */

loadGapi() {
  return new Promise((resolve, reject) => {
    gapi.load('client', () => {
      gapi.client.init({apiKey: 'AIzaSyD5Gl9...'}).then(() => {            
        resolve(gapi.client);
      })
    });
  });
}

// Method used in any component
getUserById(id: number) {
  return gapi.client.request({
    method: 'GET',
    'path': this.constants['endpoint_user_getbyid'] + '/' + id,
    'root': this.constants['api_url']
  });
}

Finally; in my component, i inject this gapiService and I am able to use client.request on component init !

ngOnInit() {
  this.gapiService
      .getUserById(5066549580791808)
      .then(
        ...
  });

Load Angular 5 component after gapi has been loaded

1 Answers1