CODEWITHSUNDEEP
javascriptangulartypescriptionic2ionic3
Ahmed Mohsen
Ahmed Mohsen

Reputation: 433

using external JS libraries in my angular 2 project

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

Upvotes: 30

Views: 55254

Answers (3)

mad_fox
mad_fox

Reputation: 3188

I needed to use a function inside of an external library, so rather than declaring the JS class, I declared the JS function.

declare function zoom(t: any);

Upvotes: 0

Korotkikh Mikhail
Korotkikh Mikhail

Reputation: 751

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;

Upvotes: 58

Ivar Reukers
Ivar Reukers

Reputation: 7719

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;)

Upvotes: 45

Related Questions