在Angular中使用NPM库并配合Angular-CLI使用

Question

我正在尝试在使用Angular-CLI的Angular 2应用程序中使用npm中的progressbar.js库。

我使用npm install progressbar.js --save进行了安装。progressbar.js的文档说要使用var ProgressBar = require('progressbar.js')，但我无法使用它，因为我没有SystemJS。

我查找了一些信息，并找到了一个解决方案，将其包含在angular-cli.json的scripts数组中，我也这样做了：

"scripts": [
     "../node_modules/progressbar.js/dist/progressbar.js"
  ],

应用程序可以使用ng serve编译通过，但我真的无法弄清如何使用所包含的库。在我的组件中，我尝试了不同的导入语句，例如import * as Progressbar from 'progressbar.js/dist'或import { Progressbar } from 'progressbar.js/dist'，但没有一个能够正常工作。

有人知道我该如何使用这个库吗？

- Daniel Lerps

Answer 1

由于ProgressBar没有作为TypeScript类导出，因此您将无法使用import语句将其导入到组件中。

在angular-cli.json的scripts数组中包含progressbar.js文件后，在需要使用它的组件中添加以下行就足够了：declare var ProgressBar: any;。这个语句是一种解决方案，可以在TypeScript类中使用第三方JavaScript库。

示例app.component.js - 简单地在控制台中打印对象：

import { Component, OnInit } from '@angular/core';
declare var ProgressBar: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  ngOnInit() {
    console.log(ProgressBar);
  }
}

- Tudor Ciotlos

---

谢谢。我尝试了一下，它可以工作...现在只是想弄清楚如何找出为任意库声明哪个变量名。显然，在这种情况下ProgressBar是一个简单的猜测，但我相信有比猜测更好的方法...刚才正在查看node_modules中的一些文件，但找不到明显的声明、导出、配置... - Daniel Lerps

通常这些JavaScript库会向window或global对象添加一个对象引用（在你的情况下是ProgressBar）。如果您打开progressbar.js文件，您可以看到如何添加此引用，尽管代码不是非常可读。 - Tudor Ciotlos