How to implement google auto translate in angular application avoiding the creation of scripts tags in the dom?

Question

I m looking for a way to reuse the 2 scripts provided by google translate to implement the auto translation in an angular application without injecting them in the dom. Like a way to convert them to internal function in my component.

I m taling about the 2 scripts + the hidden div element :

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" defer=""></script>


<script type="text/javascript">
                     function googleTranslateElementInit() {
                     new google.translate.TranslateElement(
                     {
                       pageLanguage: 'ko',
                       includedLanguages: 'en',
                       layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
                       autoDisplay: false
                     },
                     'google_translate_element');}</script>



<div class="hidden" id="google_translate_element"></div>

Answer 1

Instead

//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit

You should

https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit

You missed https: thats why its not working