在我的 Angular 2 项目中使用外部 JS 库答案

【问题标题】：using external JS libraries in my angular 2 project在我的 Angular 2 项目中使用外部 JS 库
【发布时间】：2017-04-28 11:50:53
【问题描述】：

我需要在我的 Angular 2 项目中使用 this JS library

这个问题可能与我重复，但没有答案对我有用

我尝试将库作为脚本标记包含在我的 index.html 页面中

它总是看不到它http://localhost:8100/PrayTimes.js 文件是不存在

我也在上面写了这段代码

declare var PrayTimes:any;

我试图在我的构造函数中使用它，但我得到了这个错误

祈祷时间未定义

【问题讨论】：

你把javascript文件放到src/assets了吗？并将其包含为<script src="assets/PrayTimes.js"></script>?
做得很好，谢谢（Y）

标签： javascript angular typescript ionic2 ionic3

【解决方案1】：

如果您使用 angular-cli，您可以将所有外部 JS 文件添加到 assets 文件夹中。然后在angular-cli.json 中添加它们：

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

你也可以使用外部样式：

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

当然你是对的，那么你需要添加typings.d.ts：

declare var PrayTimes:any;
declare var System: any;
declare var $: any;
declare var moment: any;
declare var Chart: any;

【讨论】：

为什么不需要打字？
以防万一其他人想知道，添加依赖项时必须重新启动角度服务器。

【解决方案2】：

将所有javascript、外部css、图像等放在src/assets中

（将编译为build/assets）

在你的index.html：<script src="assets/yourJavascript.js"></script>

然后你可以像你描述的那样使用它。 (declare var PrayTimes: any;)

【讨论】：

not wroking ionic, rc4, ERROR ReferenceError: testvar is not defined