Menu
I need to use this JS library in my angular 2 project
this question may be duplicate with me , but no answer worked for me
I tried to include the library as script tag in my index.html page
It always does not see it http://localhost:8100/PrayTimes.js file is not exist
also I wrote this code above
declare var PrayTimes:any; I tried to use it in my constructor , but I am getting this error
PrayTimes is not defined
445
To use the JavaScript library in an Angular project, install the library via npm and check for its type declaration file. Install the type declaration file from @types/<library-name>, if it is not a part of the source code. import the library in your component and start using it.
First include the library source file before the compiled TypeScript file of your project ,using script tag in your HTML file . declare var libGlobal: any; You need to replace libGlobal with your library global object which gives access to the library API . Then just use any library function just like normal .
Angular 2 is an open source JavaScript framework to build web applications in HTML and JavaScript. This tutorial looks at the various aspects of Angular 2 framework which includes the basics of the framework, the setup of Angular and how to work with the various aspects of the framework.
If you use angular-cli, you can add all your external JS files in assets folder. And then in angular-cli.json add them:
"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js", "../node_modules/moment/moment.js", "../node_modules/chart.js/dist/Chart.bundle.min.js", "../node_modules/chart.js/dist/Chart.min.js", "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js", "./assets/js/slimscroll.min.js", "./assets/js/inspinia.js", "./assets/js/metisMenu.js", "./assets/js/footable.all.min.js" ] You can do it also with external styles:
"styles": [ "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css", "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss", "../node_modules/font-awesome/scss/font-awesome.scss", "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css", "./assets/scss/plugins/footable/footable.core.css", "./assets/scss/style.scss" ] And of course you are right, then you need to add in typings.d.ts:
declare var PrayTimes:any; declare var System: any; declare var $: any; declare var moment: any; declare var Chart: any; Place all javascript, external css, images etc. in src/assets
(will be compiled to build/assets)
In your index.html: <script src="assets/yourJavascript.js"></script>
Then you can just use it like you describe. (declare var PrayTimes: any;)
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
