How to use External javascript library in typescript - Angular 4

Question

I am trying to use Google Login and Jquery in Typescript. I have already made sure that these files are included in the project: jquery.min and an import of google: <script defer src="https://apis.google.com/js/platform.js"></script>

On my component I added:

declare var gapi: any;
declare var $: any;

But I am still getting an error on ng serve :

Cannot find namespace 'gapi'.

How do I properly refer or import external javascript libraries / namespace or functions in Typescript Angular 4?

Answer 1

Install third-party libraries locally, eg

npm i jquery --save

Angular CLI projects have a config file .angular-cli.json. Add jquery to the scripts section there and it'll be available globally for your app, for example:

"scripts": [

"../node_modules/jquery/dist/jquery.js"

]

It's also a good idea to install type definition files if available. Then you won't need to declare variables of type any, eg

npm i @types/jquery --save-dev