CODEWITHSUNDEEP
javascriptangularangular2-template
Cichy
Cichy

Reputation: 1329

Adding external libraries in Angular2

I am starting my adventure with Angular2 and I've read lots of tutorials, but there is one thing I am concern about. Lets say we have two views - one with report and one with upload image.

First view will be handled by - let's say 'ReportComponent' and on html template it will use 'Chart.js' library
Second view will be handled by 'UploadMediaComponent' and on html template it will use 'Dropzone.js'

How to include this javascript libraries on html? In most tutorials I've read the only way to resolve it is to include both libraries in the index.html page (which is consistent with single page application pattern). But in the other hand - do we really need load hundreds of external libraries at once and beggining of loading the app even if we need to use it only in one view (one component)? Let's say I just need to use 'Dropzone.js' on only one view, do I need to load it on every html view on client side?

Upvotes: 1

Views: 605

Answers (3)

Madhukar Bansode
Madhukar Bansode

Reputation: 11

You could add file in your angular-cli.json configuration file.

Example : 

 "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/highcharts/highcharts.js",
    "../node_modules/chart.js/dist/Chart.js",
    "../node_modules/chart.js/dist/Chart.min.js"    

    ]

directly add all JS build will generate script bundled version , Not needed any imports

Upvotes: 1

Fedeco
Fedeco

Reputation: 876

Have you tried to use bower or npm ? after you set it and install the libraries you need with bower install package it adds them to your html the libraries automatically.

Upvotes: 0

Pankaj Arora
Pankaj Arora

Reputation: 76

You could add file in your angular-cli.json configuration file.

Example : 

"assets": [
    "path/Dropzone.js" ,
    "path/Chart.js"
  ],

Then directly include file to ReportComponent

<script src="/Chart.js"></script>

and UploadMediaComponent

<script src="/Dropzone.js"></script>

Upvotes: 0

Related Questions