Angular2：将外部js文件导入组件 [英] Angular2: import external js file into component

问题描述

我要将此 d3gauge.js 文件导入我的angular2组件之一 memmon .component.ts 文件。

I'm going to import this d3gauge.js file into one of my angular2 component, memmon.component.ts file.

import '../../../../js/d3gauge.js';
export class MemMonComponent {
    createMemGauge() {
        new drawGauge(this.opt);  //drawGauge() is a function inside d3gauge.js
    }
}

并在相应的模板文件中添加

and in the corresponding template file, add

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

但它不起作用， drawGauge 无法找到。

But it doesn't work, drawGaugecan't be found.

所以，

1. 导入外部js文件的正确步骤是什么到angular2？


2. 因为我正在使用webpack，是否可以在webpack中执行此操作？我指的是这个问题，那里的webpack解决方案没有'由于 .ensure 而无法解决我的问题。

1. what're correct steps to import an external js file to angular2?
2. since I'm using webpack, is it possible to do it in webpack? I refer to this question , the webpack solution there doesn't work for me as a result of .ensure can't be resolved.

推荐答案

理想情况下，您需要 .d.ts 文件才能让 Linting 工作。

Ideally you need to have .d.ts file for typings to let Linting work.

但似乎 d3gauge 没有一，你可以要求开发商提供并希望他们会倾听。

But It seems that d3gauge doesn't have one, you can Ask the developers to provide and hope they will listen.

或者，您可以通过以下方式解决此问题：这样做

Alternatively, you can solve this specific issue by doing this

declare var drawGauge: any;

import '../../../../js/d3gauge.js';
export class MemMonComponent {
    createMemGauge() {
        new drawGauge(this.opt);  //drawGauge() is a function inside d3gauge.js
    }
}

---

如果您在多个文件中使用它，您可以使用以下内容创建 d3gauage.d.ts 文件

declare var drawGauge: any;

并在 boot.ts 中引用它（bootstrap）文件位于顶部，如下所示

and reference it in your boot.ts (bootstrap) file at the top, like this

///<reference path="../path/to/d3gauage.d.ts"/>

这篇关于Angular2：将外部js文件导入组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！