在Angular2中添加外部库

我从Angular2开始我的冒险，我已经阅读了很多教程，但有一件事是我关心的。假设我们有两个视图 - 一个视图和一个上传图像。

首先查看将通过以下方式处理 - 让我们说“ReportComponent”和HTML模板它会用“chart.js之”库
第二种观点将“UploadMediaComponent”处理和HTML模板它将使用'Dropzone.js'

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

来源

2016-11-28 Cichy

我希望这将帮助你：https://medium.com/@s_eschweiler/using -external-libraries-with-angular-2-87e06db8e5d1＃.pnt05l1nw –

Dropzone in angular2：http://126kr.com/article/5q2i93rmste –

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

例子：

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

然后直接包含文件ReportComponent

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

和UploadMediaComponent

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

来源

2016-11-28 11:14:07

您是否尝试过使用bower或npm？在你设置它并安装你需要的库之后，它会自动将它们添加到你的html库中。

来源

2016-11-28 11:22:16 Fedeco

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

例子：

"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构建将生成脚本捆绑版本，不再需要进口

来源

2017-03-08 09:36:16

在Angular2中添加外部库

回答

相关问题