Angular 2在模板中使用第三方库

Question

我正在尝试在应用程序中使用第三方（JustGage），已将其正确加载到angular-cli.json文件中，并且无法在组件中像这样实例化

ngAfterViewInit() {
    var g = new JustGage({
      id: "gauge",
      value: 67,
      min: 0,
      max: 100,
      title: "System Health"
    });
}

这实际上很好，但是我注意到我的IDE抱怨

找不到名称“ JustGage”

当我尝试构建应用程序时，由于此错误，编译失败。

我该如何解决这个问题？

顺便说一句，我试图声明一个JustGage：any，然后调用this.JustGage，但是不呈现该量规并且控制台更新

declare var require: any;
var JustGage = require("justgage/justgage.js");

所以require带来了一些东西，但是JustGage却没有说JustGage不是构造函数...

Answer 1

因此，由于它已经在起作用，所以问题不是第三方库的实际使用，而是打字稿问题，由

declare var JustGage: any;

在导入部分之后，我能够进行编译

为了以防万一，可以在angular-cli.json中完成脚本的实际加载

"scripts": [
    "../node_modules/chart.js/dist/Chart.js",
    "../node_modules/justgage/raphael-2.1.4.min.js",
    "../node_modules/justgage/justgage.js"
  ],

Answer 2

如果您尝试访问JustGage库，则必须使用es6语法将其import ，否则将require它。

使用这样的名称意味着您假设这是一个global variable 。

import {JustGage} from 'path/JustGage'

或者，您可以将以下行放入文件中（假设您使用的是打字稿，否则将扩展名更改为所需的扩展名）：

/// <reference path="path/JustGage.d.ts" />

当然，您必须在index.html或config某处引用您的lib。