CODEWITHSUNDEEP
javascriptangulartypescript
Raven
Raven

Reputation: 2257

How to use External javascript library in typescript - Angular 4

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?

Upvotes: 1

Views: 5116

Answers (1)

Yakov Fain
Yakov Fain

Reputation: 12378

Install third-party libraries locally, e.g. 

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, e.g. 

npm i @types/jquery --save-dev

Upvotes: 4

Related Questions