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

【问题标题】：Angular 2 using third party libraries in templateAngular 2 在模板中使用第三方库
【发布时间】：2016-12-06 04:21:01
【问题描述】：

我正在尝试在我的应用程序中使用第三方 (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 不是构造函数...

【问题讨论】：

尝试将脚本添加到您的 index.html 中，然后在您的代码中的最顶部键入：声明 let JustGage:any
我正在使用 angular-cli，它可以正确加载文件，问题是打字稿
由于您使用的是 webpack，您应该能够将它包含在 .ts 文件的顶部 import * as JustGage from 'JustGage';。如果这不起作用，您可能需要在 webpack.config 文件中修改加载程序。

标签： angular justgage

【解决方案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"
  ],

【讨论】：

你也许可以编译，但 webpack 是否也能正确打包和加载它？您应该将 JustGage 依赖项放在您的供应商文件中，然后使用 import 语句将其导入。
@patrick 我配置了 angular-cli.json 以加载所需的脚本

【解决方案2】：

如果您尝试访问 JustGage 库，如果您使用的是 es6 语法，则必须使用 import 或 require 否则。

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

import {JustGage} from 'path/JustGage'

或者您可以将这一行放在您的文件中（假设您使用的是打字稿，否则将扩展名更改为您想要的任何内容）：

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

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

【讨论】：

找不到模块'justgage'，这个库没有导出
require constructor() { this.JustGage = this.require("justgage/justgage.js"); 也不走运} // this.require 不是函数
啊 require 不在这上面，它不应该在构造函数中调用。这在您的文件之上，但在到达那里之前，我需要知道您使用的是什么打包工具@naoru
它的角度-cli
angular-cli 使用 webpack