Google Translation API using angular

2.4k Views Asked by At

I've integrated the google translation API with my angular application. Earlier, it was working fine, but now when I try to translate the content on my website, I'm getting "about:invalid#zClosurez" error. Could anyone please let me know what might be the issue? Below is the sample code for your reference:

<html> 
    <head> 
    <title>My Page</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head> 
<body> 
    <div class="translate">Тестирование</p>
    <div class="translate_control" lang="en"></div>
    
    <script>
    function googleSectionalElementInit() {
      new google.translate.SectionalElement({
        sectionalNodeClassName: 'translate',
        controlNodeClassName: 'translate_control',
        background: '#f4fa58'
      }, 'google_sectional_element');
    }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>

</body>
</html>

I found the below fiddle example on the internet, it has the same issue as mine. When you'll click on the 'Translate' button it will try to navigate you to the "about:invalid#zClosurez" address.

http://jsfiddle.net/maxim75/H3Wkr/

1

There are 1 best solutions below

0
On

I believe this issue is related to the w3school snippet code error found in this other answer.

However, I would like to add on top of that; I don't think it is a good practice to use this endpoint since it is not officially documented and therefore does not seem intended for stable usage.

As per Google docs, the service endpoint you should use is: https://translation.googleapis.com or you could additionally take a look at the supported client libraries.