Google Custom Search in ionic 3

Ionic Framework ionic-v3
1

I am trying to implement Google Custom Search in ionic 3. I tried this as following.

SearchAPI.js

(function() {
    var cx = 'KEY';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();

in index.html

 <script src="assets/js/searchAPI.js"></script>

in voice-search.html

 <gcse:search></gcse:search>

This gives the below error

Error: Template parse errors:
':gcse:search' is not a known element:
1. If ':gcse:search' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
      </ion-card>
      
      [ERROR ->]<gcse:search></gcse:search>
  
    <ion-grid>
"): ng:///AppModule/VoiceSearchPage.html@65:6
    at syntaxError (http://localhost:8100/build/vendor.js:75287:34)
    at TemplateParser.parse (http://localhost:8100/build/vendor.js:99150:19)
    at JitCompiler._parseTemplate (http://localhost:8100/build/vendor.js:108578:37)
    at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:108553:23)
    at http://localhost:8100/build/vendor.js:108455:62
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:108455:19)
    at http://localhost:8100/build/vendor.js:108325:19
    at Object.then (http://localhost:8100/build/vendor.js:75276:77)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:108324:26)

This code in HTML outside the app works fine.
How can I properly implement Google Custom Search in ionic 3?
Here I am trying a voice -search. I will have to get the query for search through speech recognition, then search the web and display the results. Is there any other way to do this in ionic 3?

1 Like