在第一次加载网站时使用angular 9的Google音译api问题

Question

我的index.html中有以下脚本标记：

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

我还有一个单独的音译服务，在该服务中，我从相应组件的AfterViewInit()方法调用initializeTransliteration()方法。

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';

      }
}

当我在清除缓存后第一次加载应用程序时，我在控制台上收到以下错误消息，并且我无法在文本区进行音译。

loading elements other than inputtools with the jsapi loader is unsupported

但是，当我刷新浏览器几次时，这个问题就解决了，并且我能够音译我在文本区域中键入的文本。

这是在我更新到angular 9之后开始发生的。

网站网址：https://www.yaavarumkelir.com -顶部导航栏上的搜索栏启用了音译。

有没有人能帮我解决这个问题？

编辑:经过进一步的调查，我发现jsapi调用有时会在新加载时获得302，这就是为什么会发生这种情况。为什么google的jsapi调用会给出302？是不是因为我的代码做了一些不正确的事情？有人能告诉我，如果第一次返回302，cI如何再次调用jsapi？

Answer 1

好的。在尝试了一天不同的方法后，下面的方法现在似乎有效。

我复制了https://www.google.com/jsapi的内容并创建了一个新文件jsapi.js。我把这个文件放在我的服务器的公共目录中。

我还将index.html文件中的脚本标记替换为：

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

理由:我认为google repo的响应可能会很慢，在本地提供文件服务可能会解决这个问题，而且看起来它是有效的。如果我发现这种方法有任何问题，我会更新答案。