Javascript 在Angular2中添加外部库

我从Angular2开始我的冒险，我读了很多教程，但有一件事我很担心。假设我们有两个视图-一个是报告视图，另一个是上传图像视图

第一个视图将由-ReportComponent处理，在html模板上使用“Chart.js”库
第二个视图将由“UploadMediaComponent”处理，并在html模板上使用“Dropzone.js”

---

如何在html中包含此javascript库？在大多数教程中，我都读过解决这个问题的唯一方法是在index.html页面中包含两个库（这与单页应用程序模式一致）。但是在另一方面，我们真的需要一次加载数百个外部库，并且即使我们只需要在一个视图（一个组件）中使用它，也不需要加载应用程序吗？假设我只需要在一个视图上使用“Dropzone.js”，是否需要在客户端的每个html视图上加载它？

您可以在angular-cli.json配置文件中添加文件

例如：

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

 "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"    

    ]

然后直接将文件包含到ReportComponent

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

并上传MediaComponent

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

您是否尝试过使用

bower

或

npm

？在您使用

bower安装包设置并安装所需的库之后，它会自动将它们添加到html库中。
您可以在angular-cli.json配置文件中添加文件

例如：

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

 "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"    

    ]

直接添加所有JS构建将生成脚本捆绑版本，不需要任何导入
我希望这将帮助您：angular2中的Dropzone：