在Angular中导入JS库

Question

我正在试图在Angular项目中使用外部库。 以下内容来自https://github.com/bramstein/fontfaceobserver的文档。

如果您使用npm，可以将Font Face Observer安装为依赖项:

$ npm install fontfaceobserver
You can then require fontfaceobserver as a CommonJS (Browserify) module:

var FontFaceObserver = require('fontfaceobserver');

var font = new FontFaceObserver('My Family');

font.load().then(function () {
  console.log('My Family has loaded');
});

使用 require 导入库，但是 Angular 不支持该关键字。有没有一种标准的导入库的方法？

- sanjihan

---

你尝试过使用 import 'fontfaceobserver' 吗？如果你的 fontfaceobserver 位于 node_modules 文件夹中。 - Salim Ibrohimi

可以，谢谢。所以基本上，如果它在node_modules中，那么可以使用import关键字？ - sanjihan

Answer 1

如果使用 webpack，只需使用 es6 导入即可。我刚刚安装它并尝试了以下代码，可以正常工作：

``` import FontFaceObserver from 'fontfaceobserver'; this.font = new FontFaceObserver('ariel'); ```

代码中的 `this.font` 看起来像这样：

this.font = {
family:"ariel",
stretch:"normal",
style:"normal",
weight:"normal"
}

- rtn

Answer 2

这是组件中导入的方式。

import FontFaceObserver from 'fontfaceobserver';

export class AppComponent {

  public fontFace: any;

  ngOnInit() {
    this.fontFace = new FontFaceObserver('ariel');
  }
}

- Rajkeshwar Prasad