undefined is not an object (evaluating 'gapi.client.request') in ionic 4 ios app

declare var gapi: any;

sendDataToCalender(token) {
    console.log(gapi);
    // gapi.load(, this.initClient);
    console.log("token", token);
    let self = this;
    let obj: any = {};
    let g_id;
    // console.log("in sendDataToCalender", self.addPlanForm.value, self.temp);
    let plan = this.local.getLocal('user', 'edit-plan');
    let penPlan = this.local.getLocal('user', 'edit-pending-task');
    console.log("plan planpen", plan, penPlan);
    if (plan != undefined) {
      g_id = plan.google_id;
    } else if (penPlan != undefined) {
      g_id = penPlan.g_id;
    }
    if (this.head == 'Add') {
      obj = {
        method: 'POST',
        path: '/calendar/v3/calendars/primary/events?alt=json'
      }
    } else {
      obj = {
        method: 'PUT',
        path: '/calendar/v3/calendars/primary/events/' + g_id
      }
    }
    console.log("obj", obj);
    console.log("obj", gapi);
    // if(gapi) {
    gapi.client.request({
      'path': obj.path,
      'method': obj.method,
      'headers': {
        'Authorization': 'Bearer ' + token
      },
      'body': JSON.stringify({
        "summary": self.addPlanForm.value['user_plans'],
        "description": self.addPlanForm.value['description'],
        // "created": self.temp.time,
        'start': {
          'dateTime': self.temp.date.split('T')[0] + 'T' + self.temp.time.split('T')[1],
          'timeZone': 'Asia/Kolkata'
        },
        'end': {
          'dateTime': self.temp.end_date.split('T')[0] + 'T' + self.temp.end_time.split('T')[1],
          'timeZone': 'Asia/Kolkata'
        },
        "recurrence": [
          "RRULE:FREQ=DAILY;COUNT=1"
        ],
        "reminders": {
          "useDefault": false,
          "overrides": [
            {
              "method": "email",
              "minutes": 1440
            },
            {
              "method": "popup",
              "minutes": self.addPlanForm.value['plan_reminder']
            }
          ]
        }
      }), 'callback': function (jsonR, rawR) {
        // console.log(jsonR, rawR);
        if (jsonR.id) {
          self.temp2 = jsonR;
          console.log("Invitation sent successfully");
          self.localAppSave();
        } else {
          console.log("Failed to sent invite.");
        }
        // console.log(jsonR);
      }
    });
    // }
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Game of Plan</title>

  <base href="/" />
  
  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta http-equiv="Content-Security-Policy"
    content="font-src 'self' data:; img-src * data:; default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' * ; style-src 'self' 'unsafe-inline' *">
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

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

<body>
  <app-root></app-root>
</body>

</html>

I want to integrate the Google Calendar API in an Ionic 4 iOS app, but I'm not able to load google api client.js. It logs in on the web but I'm not able to log in on the real device. I'm getting this error message.