Issue with Google Transliteration api with angular 9 on loading the website for the first time

Question

I have the below script tag in my index.html:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

I also have a separate service for Transliteration in which i call the initializeTransliteration() method from the respective component's AfterViewInit() method.

import { Injectable, OnInit } from "@angular/core";
import { Router } from "@angular/router";
declare var google:any; 

@Injectable()
export class Transliterate {
    constructor(private currentRouter:Router){}

    private async(){
      return new Promise(
        resolve=>{
          resolve( google.load("elements", "1", {packages:"transliteration", callback: ()=>{this.onLoad(this.currentRouter)} }) );
        }
      )
    }

    initializeTransliteration(){
      this.async().then(
        value =>{
          console.log(value);
        }
      );
    }

    private onLoad(router: Router){  
        var options = {
          sourceLanguage: 'en',
          destinationLanguage: ['ta'],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };

  var opt_options ={
          adjustElementStyle : false,
          adjustElementDirection: true
        }

  var nodesArray:Array<Object> = Array.prototype.slice.call(document.querySelectorAll("textarea#tamilTransliterate"));

  var control = new google.elements.transliteration.TransliterationControl(options);

  control.makeTransliteratable(['tamilTransliterate'], opt_options);      
  control.c.qc.t13n.c[3].c.d.keyup[0].ia.F.p = 'https://www.google.com';

      }
}

When I load the app for the first time after clearing the cache, I am getting the below error message on the console and I am not able to transliterate on the text area.

loading elements other than inputtools with the jsapi loader is unsupported

However, when I refresh the browser for a couple of times, this issue gets resolved and I am able to transliterate the text that I type in the text area.

This started happening after I updated to angular 9.

Website URL: https://www.yaavarumkelir.com - The search bar on top navbar has transliteration enabled.

Can someone please help me in resolving this issue?

Edit: Upon further investigation I found that the jsapi call gets a 302 on fresh load sometimes and that is why this is happening. Why would a google jsapi call give a 302? Is it due to my code doing something incorrect? Can someone advise how cI can call the jsapi again if a 302 is returned the first time?

Answer 1

Ok. After a day of trying different approaches, the below approach seems to be working for now.

I copied the contents of https://www.google.com/jsapi and created a new file jsapi.js. I placed this file in my server's public directory.

I also replaced the script tag in my index.html file with:

<script defer type="text/javascript" src="jsapi.js"></script>

Rationale: I thought the response from google repo might be slow and serving the file locally might resolve the issue and it seems like it is working. I will update the answer if I see any issues with this approach.