import JS library in Angular

Question

I am trying to use an external library in an Angular project. This is from the docs of https://github.com/bramstein/fontfaceobserver

If you're using npm you can install Font Face Observer as a dependency:

$ 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');
});

Library is imported using a require, but angular doesn't like that keyword. Is there some standard way of importing a library?

Answer 1

If its webpack you should just be able to import it using es6 imports. Just installed it and this works for me:

import FontFaceObserver from 'fontfaceobserver'

this.font = new FontFaceObserver('ariel');

this.font look like this:

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

Answer 2

Here is the way of importing in component.

import FontFaceObserver from 'fontfaceobserver';

export class AppComponent {

  public fontFace: any;

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