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

时间:2016-12-06 04:21:02

标签: angular justgage

我试图在我的应用程序中使用第三方(JustGage) 我已经在angular-cli.json文件中正确加载了它 并且我能够在我的组件中像这样实现它

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

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

  

找不到名字' JustGage'

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

我如何解决这个问题?

BTW我试图宣布一个JustGage:任何 然后调用this.JustGage,但是没有渲染仪表和控制台 更新

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

所以要求带来的东西,但它不是JustGage 说JustGage不是构造函数......

2 个答案:

答案 0 :(得分: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"
  ],

答案 1 :(得分:0)

如果您尝试访问该JustGage库,则必须import使用es6语法,否则require

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

import {JustGage} from 'path/JustGage'

或者您可以将此行放在您的文件中(假设您正在使用打字稿,否则将扩展程序更改为您想要的任何内容):

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

当然,您必须在index.htmlconfig中的某处引用您的lib。