在我的angular 2项目中使用外部JS库

Question

我需要在我的angular 2项目中使用这个JS库

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

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

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

我也在上面写了这段代码

declare var PrayTimes:any;

我试图在我的构造函数中使用它,但我收到此错误

PrayTimes未定义

Answer 1

如果使用angular-cli,则可以在assets文件夹中添加所有外部JS文件.然后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;

Answer 2

放置所有javascript,外部CSS,图像等 src/assets

(将编译为build/assets)

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

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