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?

Did You try: import 'fontfaceobserver', if Your fontfaceobserver located in node_modules folder — Salim Ibrohimi
– Salim Ibrohimi, Commented Oct 16, 2017 at 11:30
That works. Thanks So basically, if it is in node_modules, than you can use import keyword? — sanjihan
– sanjihan, Commented Oct 16, 2017 at 11:51

rtn · Accepted Answer · 2017-10-16 11:44:35Z

6

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"
}

answered Oct 16, 2017 at 11:44

rtn

2,0344 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajkeshwar Prasad · Accepted Answer · 2017-10-16 16:54:56Z

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

answered Oct 16, 2017 at 16:54

Rajkeshwar Prasad

89911 silver badges12 bronze badges

Collectives™ on Stack Overflow

import JS library in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related