mjanisz1 mjanisz1 - 1 month ago 14
TypeScript Question

Add 3rd party library to angular2 cli

I'm trying to add a third party library to angular2, namely the Flickity slider.

Tried to install typings. When importing them I get en error that

@typings/flickity is not a module
.

Second attempt to add it in
angular-cli.json
. Added in
apps[0].scripts
as described in the docs.
In the component i've used it like this:

this.slider = new Flickity('.news-wrapper', {
cellAlign: 'left',
contain: true,
prevNextButtons: false,
pageDots: true
});

When compiling I get an error
Cannot find name 'Flickity'.
, but when running the site it works like a charm.

The problem is I can't build the app because of that error.

How should it be added then?

Answer

follow below steps to use flickity in angular-cli based project

  1. npm install flickity --save
  2. declare module 'flickity'; in typings.d.ts
  3. import * as Flickity from "flickity"; in app.component.ts (needs to import wherever required)

use it like as you mentioned

this.slider = new Flickity('.news-wrapper', { cellAlign: 'left', contain: true, prevNextButtons: false, pageDots: true });